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作爲模式彈出？

回答

相關問題