Window.open dưới dạng cửa sổ bật lên phương thức?

Question

Tôi muốn mở window.open làm cửa sổ bật lên phương thức.

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); 

Tôi có thể sử dụng Window.ShowModelDialog(), nhưng trong cửa sổ con tôi gọi phương thức javascript mẹ. Điều đó không xảy ra với ShowModelDialog().

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

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

Nếu tôi sử dụng window.open(). Tôi có thể gọi javascript mẹ. Nhưng cửa sổ không phải là phương thức.

Cách giải quyết vấn đề này? Tôi có thể viết một cái gì đó trong popup con để luôn luôn đầu?

Answer 1

Một cửa sổ pop-up là một đứa trẻ của cửa sổ cha mẹ, nhưng nó không phải là một đứa trẻ của tài liệu gốc. Đây là cửa sổ trình duyệt độc lập của riêng nó và không được cha mẹ chứa.

Sử dụng DIV được định vị hoàn toàn và lớp phủ mờ thay thế.

EDIT - ví dụ

Bạn cần jQuery cho việc này:

<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> 

Answer 2

Giải pháp đó sẽ mở ra một cửa sổ trình duyệt mới mà không có các tính năng thông thường như thanh địa chỉ và tương tự.

Để triển khai cửa sổ bật lên phương thức, tôi khuyên bạn nên xem qua jQuery và SimpleModal, điều này thực sự mượt mà.

(Dưới đây là một số demo đơn giản sử dụng SimpleModal: http://www.ericmmartin.com/projects/simplemodal-demos/)

Answer 3

Tôi đồng ý với cả hai câu trả lời trước. Về cơ bản, bạn muốn sử dụng cái được gọi là "hộp đèn" - http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

Về cơ bản, div được tạo trong DOM của cửa sổ/tab hiện tại của bạn. Ngoài div chứa hộp thoại của bạn, lớp phủ trong suốt sẽ chặn người dùng tham gia tất cả các yếu tố cơ bản. Điều này có hiệu quả có thể tạo ra một hộp thoại phương thức (tức là người dùng PHẢI thực hiện một số loại quyết định trước khi tiếp tục).

Answer 4

Bạn có thể thử mở một hộp thoại modal với HTML5 và CSS3, hãy thử mã này:

<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>