2015-02-11 116 views
0

我正在使用引導程序& jQuery來開發一個應用程序,我需要顯示一個包含彈出窗口上的兩個表的div。到目前爲止,我已經使用從引導模式插件,但現在我需要顯示它在一個外部和浮動'小'(~800x600)窗口,我可以關閉,最小化等。在外部窗口彈出

我一直在搜索如何做到這一點,但只發現這個插件與URL一起工作:jquery.popupWindow.js(http://swip.codylindley.com/popupWindowDemo.html但我需要的是顯示一個div的內容(這個想法是以編程方式生成兩個表,將它附加到一個div,並顯示它在一個對外窗口)

任何人都可以幫我嗎? 在此先感謝。

回答

1

給你的想法,假設他們的兩個窗口parent.htmlchild.html

在parent.html:

<script type="text/javascript"> 
    $(document).ready(function() { 
     var output = "data"; 
     var OpenWindow = window.open("child.html", "mywin", ''); 
     OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html 
     OpenWindow.init(); 
    }); 
</script> 

在child.html:

<script type="text/javascript"> 
    var dataFromParent;  
    function init() { 
     document.write(dataFromParent); 
    } 
</script> 
+0

但它不是一個.html文件。我以編程方式創建div(document.createElement(「div」),然後我追加我的表(也動態生成)auxDiv.appendChild(table);現在我將它附加到引導模式以及什麼我想要的是在外部彈出窗口中顯示div。 – Sergiodiaz53 2015-02-11 15:59:13

+0

無論你有什麼,只需將它存儲在一個名爲'output'的變量中,而'child.html'就是彈出窗口的名稱,然後當你做'OpenWindow。 dataFromParent = output;'它會將內容附加到外部窗口,您可以將其最小化,關閉或任何其他內容。 – void 2015-02-11 16:03:53

0

要做到這一點,我使用的主網頁內的DIV。

這是HTML只是身體靠近標籤

<div id="popup"> 
<div id="popupcontent"> 
</div> 
</div> 

此之前放置是CSS

#popup { 
    display:none; 
    position: fixed; 
    width:auto; 
    height:auto; 
    top:13%; 
    left:40%; 
    background-color:#FFF; 
    border:#0073EA solid 4px; 
    border-radius:10px; 
    overflow:auto; 
    padding:20px; 

} 

當填充,並從一個jQuery事件處理程序顯示這樣一個div,您的代碼將看起來像這樣:

$('#mybutton').click(function(e) { 

    var popupdata = "Some latin stuff used as a placeholder"; 

    $('#popupcontent').html(popupdata); 

    $('#popup').show(); 


}); 

希望這會有所幫助。