在外部窗口中弹出

Popup in a external window

本文关键字：窗口 外部      更新时间：2023-10-06

我正在使用Bootstrap&jQuery来开发一个应用程序，我需要在弹出窗口中显示一个包含两个表的div。到目前为止，我一直使用引导程序中的模式插件，但现在我需要在一个外部浮动的"小"（~800x600）窗口中显示它，我可以关闭、最小化等。

我一直在搜索如何做到这一点，但只找到了这个与urls:jquery.popupWindow.js配合使用的插件(http://swip.codylindley.com/popupWindowDemo.html但是我需要的是显示div的内容（这个想法是通过编程生成两个表，将其附加到div中，并在外部窗口中显示）

有人能帮我吗？提前谢谢。

给你一个想法，假设它们是两个窗口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>

为了实现这一点，我在主页面中使用了一个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();

});

希望这能有所帮助。

相关文章：