Question

我正在使用Bootstrap＆amp; jQuery开发一个应用程序，我需要在弹出窗口中显示一个包含两个表的div。到目前为止，我已经使用了bootstrap中的模态插件，但现在我需要在一个外部浮动的“小”中使用它来显示它。（~800x600）窗口，我可以关闭，最小化等等。

我一直在搜索如何做但只发现这个与url一起使用的插件：jquery.popupWindow.js（http://swip.codylindley.com/popupWindowDemo.html但我需要的是显示div的内容（这个想法是以编程方式生成的两个表，将它附加到div，并在外部窗口中显示）

有人可以帮助我吗？提前谢谢。

Answer 1

给你一个想法，假设他们是两个窗口parent.html和child.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>

Answer 2

为此，我在主页面中使用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();


});

希望这有帮助。

弹出窗口在外部窗口中

2 个答案: