Window.open?

Question

मैं खुले 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() उपयोग कर सकते हैं, लेकिन मेरे बच्चे विंडो में मैं माता पिता जावास्क्रिप्ट विधि बोल रहा हूँ। यह ShowModelDialog() के साथ नहीं हो रहा है।

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

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

यदि मैं window.open() का उपयोग करता हूं। मैं अभिभावक जावास्क्रिप्ट को कॉल कर सकता हूं। लेकिन खिड़की मोडल नहीं है।

इसे कैसे हल करें? क्या मैं हमेशा बच्चे के पॉपअप में कुछ लिख सकता हूं?

Answer 1

एक पॉप-अप विंडो माता पिता का एक बच्चा है, लेकिन यह मूल दस्तावेज़ का एक बच्चा नहीं है। यह अपनी स्वतंत्र ब्राउज़र विंडो है और माता-पिता द्वारा निहित नहीं है।

उपयोग एक बिल्कुल-तैनात 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> 

Answer 2

समाधान इस तरह के एड्रेस बार और इसी तरह के रूप में सामान्य सुविधाओं के बिना एक नई ब्राउज़र विंडो खुल जाएगा कि।

एक मॉडल पॉपअप को लागू करने के लिए, मैं तुम्हें jQuery और SimpleModal पर एक नज़र, जो वास्तव में चालाक है लेने के लिए सुझाव देते हैं।

(यहाँ कुछ सरल SimpleModal का उपयोग कर क़ौम हैं: http://www.ericmmartin.com/projects/simplemodal-demos/)

Answer 3

मैं दोनों पिछले जवाब से सहमत हैं। असल में, आप "लाइटबॉक्स" के रूप में जाना जाता है - http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

यह आपके वर्तमान विंडो/टैब के DOM के भीतर अनिवार्य रूप से एक div है। आपके संवाद वाले div के अतिरिक्त, एक पारदर्शी ओवरले उपयोगकर्ता को सभी अंतर्निहित तत्वों को शामिल करने से रोकता है। यह प्रभावी रूप से एक मॉडल संवाद बनाने (अर्थात उपयोगकर्ता चाहिए पर जाने से पहले निर्णय किसी तरह का बनाना) कर सकते हैं।

Answer 4

आप एचटीएमएल 5 और 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>