jquery UI संवाद में, क्या किसी अन्य मोडल संवाद

Question

के शीर्ष पर एक मोडल संवाद डालना संभव है मेरे पास jquery UI संवाद का उपयोग करके एक मॉडल संवाद है। जब मैं उपयोगकर्ता पहले संवाद में एक फ़ील्ड बदलता हूं तो अब मैं एक और संवाद पॉप अप करना चाहता हूं। दोनों मोडल होना चाहिए।

क्या यह संभव है क्योंकि मैंने इस कोड को डालने का प्रयास किया और कुछ भी पॉपअप नहीं लगता है। नियमित पृष्ठ से क्लिक करते समय निम्न कोड ठीक काम करता है (जहां आईडी के साथ चयन नियंत्रण: selectDropdownThatICanChange) लेकिन यदि मैं वही चुनिंदा नियंत्रण बदल रहा हूं जो स्वयं बदल रहा है तो संवाद एक संवाद है ("ओपन") लाइन कुछ भी नहीं करती है। परिवर्तन घटना आग लगती है और खुली विधि को बुलाया जाता है लेकिन कुछ भी पॉप अप नहीं होता है।

$("#secondModalDialog").dialog({ 
    resizable: false, 
    height: 'auto', 
    autoOpen: false, 
    title: "Warning", 
    width: 400, 
    modal: true, 
    buttons: { 
     'Close': function() { 
      $("#secondModalDialog").dialog('close'); 
     } 
    } 
}); 


$('#selectDropdownThatICanChange').live("change", function() { 
    $("#secondModalDialog").dialog('open'); 
}); 

और यहाँ संवाद है

<div id="secondModalDialog" style="display:none"> 
     This is a test <br/> This is atest 
</div> 

Answer 1

यूआई संवाद सिंगलटन के रूप में आप जितने चाहें, उतने संवाद खोल सकते हैं नहीं कर रहे हैं। और डिफ़ॉल्ट रूप से वे ढेर हैं। लेकिन जब संवाद केंद्रित हो जाता है तो यह अन्य संवादों के सामने आता है।

यहां आपके लिए बनाया गया बेवकूफ है। Open dialog from first dialog

// HTML: 
<div id="dialog-modal" title="Basic modal dialog"> 
    Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content. 
    <select id="dialogSelect"> 
     <option>123</option> 
     <option>234</option>  
    </select> 
</div> 
<div id="another-dialog-modal" title="2nd Modal :O"> 
    Second Modal yayyay 
</div> 

// JS: 
$("#dialog-modal").dialog({ 
    height: 300, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 
$("#dialogSelect").change(function(){ 
    $("#another-dialog-modal").dialog('open'); 
}); 
$("#another-dialog-modal").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

मैं पहली बार संवाद पर और परिवर्तन घटना पर मैं पहली बार संवाद ऊपर एक और संवाद खोला ड्रॉप डाउन रख दिया है।

Answer 2

sushanth reddy के रूप में टिप्पणी में संकेत दिया (जो सिर्फ एक div है), संवाद की z- सूचकांक सेट:

$("#secondModalDialog").dialog({ 
    resizable: false, 
    height: 'auto', 
    autoOpen: false, 
    title: "Warning", 
    width: 400, 
    modal: true, 
    zindex: 1001, // Default is 1000 
    buttons: { 
     'Close': function() { 
      $("#secondModalDialog").dialog('close'); 
     } 
    } 
}); 

संदर्भ : http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex

Answer 3

आप किसी भी मॉडल और डिफ़ॉल्ट व्यवहार को खोल सकते हैं या वे खोले गए क्रम में ढेर कर रहे हैं।

Demo: jsFiddle

$('#dialog-modal').dialog({ 
    height: 300, 
    modal: true, 
    buttons: { 
     'Another Modal': function() { 
      $('#another-dialog-modal').dialog('open'); 
     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

$('#another-dialog-modal').dialog({ 
    autoOpen: false, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

Answer 4

बस भविष्य के खोजकर्ताओं को जानना चाहता था। एक मॉडल विजिट को दूसरे पर रखने के लिए जेड-इंडेक्स का उपयोग करना संभव है। मैं jquery ui 1.10.3 का उपयोग कर रहा हूँ।

जिस तरह से आप इसके बारे में जाते हैं, आप अपने संवाद निर्माता को एक संवाद वर्ग देते हैं।

$("#secondModalDialog").dialog({ 
    title: 'Title', 
    dialogClass: 'ModalWindowDisplayMeOnTopPlease', 
    width: 200, 
    height: 200 
}); 

फिर अपने सीएसएस में, आप पहले संवाद की तुलना में एक उच्च जेड-इंडेक्स निर्दिष्ट करते हैं।

.ModalWindowDisplayMeOnTopPlease { 
    z-index: 100; 
} 

आप जाँच करना पड़ सकता है जो एक अपनी फ़ायरबग या जो z- सूचकांक इसके साथ instanced था जाँच करने के लिए कुछ देव उपकरण के साथ उपयोग कर। मेरा डिफ़ॉल्ट जेड-इंडेक्स पहले मोडल विजेट पर 9 0 था। खिड़की कोड इस तरह smthg लग रहा था:

<div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;"> 
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>