2018 এর জন্য আপডেট - বুটস্ট্র্যাপ 4 ব্যবহার করে
আমি বেশিরভাগ উত্তরগুলিতে অনেকগুলি অপ্রয়োজনীয় jQuery রয়েছে বলে মনে করেছি। অন্য কোনও মডেল থেকে কোনও মডেল খোলার জন্য বুটস্ট্র্যাপ যেমন সরবরাহ করে সেগুলি ব্যবহার করে সহজেই কাজটি করা যেতে পারে show.bs.modal। আপনি কিছু সিএসএস ব্যাকড্রপ ওভারলেগুলি পরিচালনা করতেও চাইতে পারেন want অন্য পরিস্থিতিতে থেকে 3 টি মুক্ত মডেল এখানে ...
অন্য একটি মডেল থেকে মোডাল খুলুন (প্রথম মডেলটি উন্মুক্ত রাখুন)
<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>
এই ক্ষেত্রে একটি সম্ভাব্য সমস্যা হ'ল ২ য় মডেলের ব্যাকড্রপটি 1 ম মডেলটি আড়াল করে। এটি প্রতিরোধ করতে, ২ য় মডেল data-backdrop="static"তৈরি করুন এবং ব্যাকড্রপগুলির জেড-সূচকগুলি ঠিক করতে কিছু সিএসএস যুক্ত করুন ...
.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 ম মডেলটি বন্ধ করছি তাই ব্যাকড্রপ সিএসএস ফিক্সের প্রয়োজন নেই। একটি সাধারণ ফাংশন যা ২ য় মডেলের show.bs.modalইভেন্ট পরিচালনা করে 1 ম মডেলটি বন্ধ করে।
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
অন্য একটি মডেলের অভ্যন্তরে মোডাল খুলুন
সর্বশেষ একাধিক মডেলের দৃশ্যে 1 ম মডালের ভিতরে 2 য় মডেলটি খোলা হচ্ছে। এক্ষেত্রে ২ য় এর মার্কআপটি 1 ম এর ভিতরে স্থাপন করা হয়। কোনও অতিরিক্ত সিএসএস বা 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