Window.open作为模式弹出？

我想打开window.open作为模式弹出。Window.open作为模式弹出？

var features = 'resizable= yes; status= no; scroll= no; help= no; center= yes; 
width=460;height=140;menubar=no;directories=no;location=no;modal=yes'; 
    window.open(href, 'name', features, false);

我可以使用Window.ShowModelDialog()，但在我的子窗口中，我打电话给父javascript方法。 ShowModelDialog（）不会发生这种情况。

function CallParentScript(weburl) { 
     alert(weburl); 
     if (weburl != null) { 
      var url = weburl; 

      window.opener.SelectUserImageCallback(url); 
      window.close(); 
      return false; 
     } 
    }

如果我使用window.open()。我可以打电话给家长JavaScript。但窗口不是模态的。

如何解决这个问题？我可以在儿童弹出窗口中写下一些东西来始终顶部？

来源

2010-10-14 James123

弹出是父窗口的子窗口，但它不是父文档的子项。它是它自己的独立浏览器窗口，不包含在父级中。

改为使用绝对定位的DIV和半透明覆盖图。

编辑 - 例如

您需要的jQuery此：

<style> 
html, body { 
    height:100% 
} 


#overlay { 
    position:absolute; 
    z-index:10; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background-color:#f00; 
    filter:alpha(opacity=10); 
    -moz-opacity:0.1; 
    opacity:0.1; 
    cursor:pointer; 

} 

.dialog { 
    position:absolute; 
    border:2px solid #3366CC; 
    width:250px; 
    height:120px; 
    background-color:#ffffff; 
    z-index:12; 
} 

</style> 
<script type="text/javascript"> 
$(document).ready(function() { init() }) 

function init() { 
    $('#overlay').click(function() { closeDialog(); }) 
} 

function openDialog(element) { 
    //this is the general dialog handler. 
    //pass the element name and this will copy 
    //the contents of the element to the dialog box 

    $('#overlay').css('height', $(document.body).height() + 'px') 
    $('#overlay').show() 
    $('#dialog').html($(element).html()) 
    centerMe('#dialog') 
    $('#dialog').show(); 
} 

function closeDialog() { 
    $('#overlay').hide(); 
    $('#dialog').hide().html(''); 
} 

function centerMe(element) { 
    //pass element name to be centered on screen 
    var pWidth = $(window).width(); 
    var pTop = $(window).scrollTop() 
    var eWidth = $(element).width() 
    var height = $(element).height() 
    $(element).css('top', '130px') 
    //$(element).css('top',pTop+100+'px') 
    $(element).css('left', parseInt((pWidth/2) - (eWidth/2)) + 'px') 
} 


</script> 


<a href="javascript:;//close me" onclick="openDialog($('#content'))">show dialog A</a> 

<a href="javascript:;//close me" onclick="openDialog($('#contentB'))">show dialog B</a> 

<div id="dialog" class="dialog" style="display:none"></div> 
<div id="overlay" style="display:none"></div> 
<div id="content" style="display:none"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl felis, placerat in sollicitudin quis, hendrerit vitae diam. Nunc ornare iaculis urna. 
</div> 

<div id="contentB" style="display:none"> 
    Moooo mooo moo moo moo!!! 
</div>

来源

2010-10-14 21:18:53

不能相信这家伙没有至少给你一个了投票所有的工作！ – 2011-09-26 14:48:51

该解决方案将打开一个新的浏览器窗口，而没有地址栏和类似的常规功能。

为了实现一个模式弹出窗口，我建议你看看jQuery和SimpleModal，这真的很漂亮。

（下面是使用SimpleModal一些简单的演示：http://www.ericmmartin.com/projects/simplemodal-demos/）

来源

2010-10-14 21:15:41

我以前都同意的答案。基本上，你想使用所谓的“灯箱” - http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

它实质上是一个div，而不是在当前窗口/选项卡的DOM中创建的。除了包含对话框的div外，透明叠加层还会阻止用户使用所有底层元素。这可以有效地创建模态对话框（即用户在继续之前必须做出某种决定）。

来源

2010-10-15 04:29:43

您可以尝试打开一个模式对话框，HTML5和CSS3，试试这个代码：

<head> 
<style> 
.windowModal { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 
.windowModal:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.windowModal > div { 
    width: 400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
} 
.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
} 

.close:hover { background: #00d9ff; } 
</style> 
</head> 
<body> 

<a href="#divModal">Open Modal Window</a> 

<div id="divModal" class="windowModal"> 
    <div> 
     <a href="#close" title="Close" class="close">X</a> 
     <h2>Modal Dialog</h2> 
     <p>This example shows a modal window without using javascript only using html5 and css3, I try it it¡</p> 
     <p>Using javascript, with new versions of html5 and css3 is not necessary can do whatever we want without using js libraries.</p> 
    </div> 
</div> 
</body>

来源

2014-02-02 10:03:16 nacho

伟大的造型和过渡 – warkentien2 2016-06-10 22:08:35

Window.open作为模式弹出？

回答

相关问题