2018 के लिए अपडेट - बूटस्ट्रैप 4 का उपयोग करना
मैंने पाया कि अधिकांश उत्तर अनावश्यक jQuery के बहुत से हैं। किसी अन्य मोडल से मोडल खोलने के लिए बस उन घटनाओं का उपयोग करके किया जा सकता है जो बूटस्ट्रैप प्रदान करता हैshow.bs.modal । आप चाहें तो बैकग्राउंड ओवरले को संभालने के लिए कुछ CSS भी ले सकते हैं। यहाँ अन्य परिदृश्यों से 3 खुले मोडल हैं ...
दूसरे मोडल से ओपन मोडल (1st modal open रखें)
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
..
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
इस मामले में एक संभावित मुद्दा यह है कि 2 मोडल की पृष्ठभूमि 1 मोडल को छिपाती है। इसे रोकने के लिए, 2 मोडल बनाएं data-backdrop="static", और बैकग्राउंड के z-indexes को ठीक करने के लिए कुछ CSS जोड़ें ...
/* modal backdrop fix */
.modal:nth-of-type(even) {
z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1051 !important;
}
https://www.codeply.com/go/NiFzSCukVl
दूसरे मोडल से ओपन मोडल (करीब 1 मोडल)
यह उपरोक्त परिदृश्य के समान है, लेकिन जब से हम 2 ओपन होने पर 1 मोडल बंद कर रहे हैं, बैकग्राउंड सीएसएस फिक्स की कोई आवश्यकता नहीं है। एक साधारण फ़ंक्शन जो 2 मॉडल्स show.bs.modalइवेंट को हैंडल करता है, 1 मोडल बंद कर देता है।
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
दूसरे मोडल के अंदर ओपन मोडल
अंतिम कई मोडल परिदृश्य, 1 मोडल के अंदर दूसरा मोडल खोल रहा है। इस स्थिति में 2 के लिए मार्कअप को 1 के अंदर रखा गया है। कोई अतिरिक्त CSS या jQuery की आवश्यकता नहीं है।
<div class="modal" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/iSbjqubiyn