मुझे यह चाहिए कि ओवरले पहले मोडल के ऊपर दिखता है, न कि बैक में।
मैंने इसे बदलने की कोशिश z-indexकी .modal-backdrop, लेकिन यह एक गड़बड़ हो गया।
कुछ मामलों में मेरे पास एक ही पृष्ठ पर दो से अधिक मोडल हैं।
मुझे यह चाहिए कि ओवरले पहले मोडल के ऊपर दिखता है, न कि बैक में।
मैंने इसे बदलने की कोशिश z-indexकी .modal-backdrop, लेकिन यह एक गड़बड़ हो गया।
कुछ मामलों में मेरे पास एक ही पृष्ठ पर दो से अधिक मोडल हैं।
जवाबों:
इसके लिए कई सुधार देखने के बाद, और उनमें से कोई भी ऐसा नहीं था जिसकी मुझे आवश्यकता थी, मैं एक छोटे समाधान के साथ आया हूं जो @YermoLamers & @Ketwaroo से प्रेरित है ।
बैकड्रॉप z- इंडेक्स फिक्स
यह समाधान इवेंट के ट्रिगर होने पर निर्मित नहीं setTimeoutहोने के कारण उपयोग करता है।.modal-backdropshow.bs.modal
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});.modalपृष्ठ पर बनाए गए प्रत्येक के लिए काम करता है (यहां तक कि गतिशील मोडल)यदि आपको किसी भी कारण से हार्डकोडेड जेड-इंडेक्स पसंद नहीं है, तो आप इस तरह पेज पर उच्चतम जेड-इंडेक्स की गणना कर सकते हैं :
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;स्क्रॉलबार फिक्स
यदि आपके पृष्ठ पर एक मोडल है जो ब्राउज़र की ऊँचाई से अधिक है, तो दूसरा मोडल बंद करते समय आप इसमें स्क्रॉल नहीं कर सकते। इस ऐड को ठीक करने के लिए:
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});संस्करण
इस समाधान का बूटस्ट्रैप 3.1.0 - 3.3.5 के साथ परीक्षण किया गया है
.not(this) साथ काम करने के लिए एक मामूली बदलाव ( दूसरी पंक्ति में जोड़ा गया) करना पड़ा var zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
मुझे लगता है कि एक जवाब स्वीकार कर लिया गया है, लेकिन मैं दृढ़ता से सुझाव देता हूं कि इसे ठीक करने के लिए बूटस्ट्रैप को हैक नहीं करना चाहिए।
आप बहुत आसानी से show.bs.modal और hidden.bs.modal ईवेंट हैंडलर्स को हुक करके और z- इंडेक्स को एडजस्ट करके समान प्रभाव प्राप्त कर सकते हैं।
थोड़ी और जानकारी यहाँ उपलब्ध है।
यह समाधान मनमाने ढंग से गहरे ढेर वाले मॉडल के साथ स्वचालित रूप से काम करता है।
स्क्रिप्ट स्रोत कोड:
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(event) {
$(this).removeClass( 'fv-modal-stack' );
$('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
});
$('.modal').on('shown.bs.modal', function (event) {
// keep track of the number of open modals
if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
$('body').data( 'fv_open_modals', 0 );
}
// if the z-index of this modal has been set, ignore.
if ($(this).hasClass('fv-modal-stack')) {
return;
}
$(this).addClass('fv-modal-stack');
$('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
$(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
$('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
$('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack');
});
});Yermo Lamers के सुझाव के आधार पर कुछ छोटे संस्करण, यह ठीक काम करता है। यहां तक कि बुनियादी एनिमेशन जैसे फीके इन / आउट और यहां तक कि क्रेजी बैटमैन अखबार भी घूमते हैं। http://jsfiddle.net/ketwaroo/mXy3E/
$('.modal').on('show.bs.modal', function(event) {
var idx = $('.modal:visible').length;
$(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
$('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
$('.modal-backdrop').not('.stacked').addClass('stacked');
});modal-openबॉडी एलिमेंट पर क्लास को भी रिस्टोर करना होगा : jsfiddle.net/vkyjocyn
A1RPun के उत्तर को स्ट्रिप्प्लिंगवर्यर के सुझाव के साथ जोड़ते हुए, मैं इसके साथ आया:
$(document).on({
'show.bs.modal': function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
},
'hidden.bs.modal': function() {
if ($('.modal:visible').length > 0) {
// restore the modal-open class to the body element, so that scrolling works
// properly after de-stacking a modal.
setTimeout(function() {
$(document.body).addClass('modal-open');
}, 0);
}
}
}, '.modal');तथ्य के बाद जोड़े गए डायनामिक मॉडल्स के लिए भी काम करता है, और दूसरा-स्क्रॉलबार मुद्दे को हटा देता है। सबसे उल्लेखनीय बात यह है कि मुझे यह उपयोगी लगा कि बूटबॉक्स अलर्ट से सत्यापन प्रतिक्रिया के साथ मोडल के अंदर के रूपों को एकीकृत किया गया था, क्योंकि वे डायनामिक मोडल का उपयोग करते हैं और इस तरह आपको केवल .modal के बजाय दस्तावेज़ को घटना में बांधने की आवश्यकता होती है, क्योंकि यह केवल इसे मौजूदा के साथ संलग्न करता है। क्रियार्थ द्योतक।
मैंने एक बूटस्ट्रैप प्लगइन बनाया है जिसमें यहां पोस्ट किए गए बहुत सारे विचार शामिल हैं।
बूटप्ले पर डेमो: http://www.bootply.com/cObcYInvpq
गीथब: https://github.com/jhaygt/bootstrap-multimodal
यह इस मुद्दे को क्रमिक तौर-तरीकों से भी संबोधित करता है, जिससे पृष्ठभूमि गहरे और गहरे रंग की हो जाती है। यह सुनिश्चित करता है कि किसी भी समय केवल एक पृष्ठभूमि दिखाई दे रही है:
if(modalIndex > 0)
$('.modal-backdrop').not(':first').addClass('hidden');दृश्यमान पृष्ठभूमि का z-index दोनों show.bs.modalऔर hidden.bs.modalघटनाओं पर अद्यतन किया जाता है :
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));स्टैकिंग मोडल्स को हल करते समय मुख्य पृष्ठ को स्क्रॉल करते हैं जब एक बंद होता है तो मैंने पाया कि बूटस्ट्रैप के नए संस्करण (कम से कम संस्करण 3.0.3 के बाद) स्टैक मोडल्स के लिए किसी अतिरिक्त कोड की आवश्यकता नहीं है।
आप अपने पृष्ठ पर एक से अधिक मोडल (निश्चित रूप से एक अलग आईडी वाले) जोड़ सकते हैं। एक से अधिक मोडल खोलने पर पाया जाने वाला एकमात्र मुद्दा यह होगा कि modal-openबॉडी सिलेक्टर के लिए क्लास को हटा देना ।
निम्नलिखित पुनः जोड़ने के लिए आप निम्नलिखित जावास्क्रिप्ट कोड का उपयोग कर सकते हैं modal-open:
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});इस मामले में कि आपके द्वारा सेट किए गए स्टैक्ड मोडल के लिए पृष्ठभूमि प्रभाव की आवश्यकता नहीं है data-backdrop="false" ।
संस्करण 3.1.1। फिक्स्ड मोडल बैकड्रॉप, मोडल के स्क्रॉलबार को ओवरलेइंग करता है , लेकिन उपरोक्त समाधान पहले के संस्करणों के साथ भी काम करता है।
अंत में हल किया। मैंने इसे कई तरीकों से परखा और ठीक काम किया।
यहाँ किसी के लिए एक ही समस्या का समाधान है: Modal.prototype.show फ़ंक्शन (bootstrap.js या modal.js पर) बदलें
से:
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()सेवा:
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$backdrop
.css("z-index", (1030 + (10 * $(".modal.fade.in").length)))
that.$element
.css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()यह सबसे अच्छा तरीका है जो मुझे मिला: यह जांचें कि कितने मोडल खोले गए हैं और मोडल के जेड-इंडेक्स और बैकड्रॉप को उच्च मूल्य पर बदलते हैं।
यदि आप बूटस्ट्रैप 4 समाधान की तलाश कर रहे हैं, तो शुद्ध सीएसएस का उपयोग करना आसान है:
.modal.fade {
background: rgba(0,0,0,0.5);
}अपने जेएस को निम्नलिखित को बूट करने पर जोड़ने का प्रयास करें
$('#myModal2').on('show.bs.modal', function () {
$('#myModal').css('z-index', 1030); })
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal').css('z-index', 1040); })स्पष्टीकरण:
विशेषताओं के साथ खेलने के बाद (क्रोम के देव टूल का उपयोग करके), मैंने महसूस किया है कि z-indexनीचे कोई भी मूल्य1031 को पृष्ठभूमि के पीछे रखा जाएगा।
तो बूटस्ट्रैप के मोडल घटना हैंडल का उपयोग करके मैं सेट z-indexकरने के लिए 1030। यदि #myModal2दिखाया गया है और यदि छिपा हुआ है तो उसे z-indexवापस सेट करें ।1040#myModal2
हर बार जब आप sys.showModal फ़ंक्शन इंक्रीमेंट z- इंडेक्स चलाते हैं और इसे अपने नए मोडल पर सेट करते हैं।
function system() {
this.modalIndex = 2000;
this.showModal = function (selector) {
this.modalIndex++;
$(selector).modal({
backdrop: 'static',
keyboard: true
});
$(selector).modal('show');
$(selector).css('z-index', this.modalIndex );
}
}
var sys = new system();
sys.showModal('#myModal1');
sys.showModal('#myModal2');मेरे लिए इसका समाधान यह नहीं था कि मैं अपने तौर-तरीकों पर "फीका" वर्ग का उपयोग करूं।
कोई स्क्रिप्ट समाधान नहीं, केवल दिए गए सीएसएस का उपयोग करके आपके पास मॉडल्स की दो परतें हैं, 2 डी मोडल को उच्च z इंडेक्स पर सेट करें
.second-modal { z-index: 1070 }
div.modal-backdrop + div.modal-backdrop {
z-index: 1060;
}यदि आप एक अन्य ओपन मोडल के ऊपर एक विशिष्ट मोडल दिखाना चाहते हैं, तो दूसरे मोडल के बाद सबसे टॉप मोडल का HTML जोड़ने का प्रयास करें div।
यह मेरे लिए काम किया:
<div id="modal-under" class="modal fade" ... />
<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />बूटस्ट्रैप 4 के लिए मेरा समाधान, मोडल और डायनामिक मोडल की असीमित गहराई के साथ काम करना।
$('.modal').on('show.bs.modal', function () {
var $modal = $(this);
var baseZIndex = 1050;
var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
var backdropZIndex = modalZIndex - 10;
$modal.css('z-index', modalZIndex).css('overflow', 'auto');
$('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
var baseBackdropZIndex = 1040;
$('.modal-backdrop.show').each(function (i) {
$(this).css('z-index', baseBackdropZIndex + (i * 20));
});
});
$('.modal').on('hide.bs.modal', function () {
var $modal = $(this);
$modal.css('z-index', '');
});प्रत्येक मॉडल को एक अलग आईडी दिया जाना चाहिए और प्रत्येक लिंक को एक अलग मॉडल आईडी को लक्षित किया जाना चाहिए। तो यह कुछ इस तरह होना चाहिए:
<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...EDIT: बूटस्ट्रैप 3.3.4 ने इस समस्या (और अन्य मोडल मुद्दों) को हल कर दिया है, इसलिए यदि आप अपने बूटस्ट्रैप CSS और JS को अपडेट कर सकते हैं जो सबसे अच्छा समाधान होगा। यदि आप नीचे दिए गए समाधान को अपडेट नहीं कर सकते हैं, तब भी काम करेगा और अनिवार्य रूप से बूटस्ट्रैप 3.3.4 के रूप में एक ही काम करता है (पुनर्गणना और पैडिंग लागू करें)।
जैसा कि बास जॉब्स ने बताया, बूटस्ट्रैप के नए संस्करणों में जेड-इंडेक्स हल किया गया है। मोडल-ओपन क्लास और पेडिंग-राइट अभी भी मेरे लिए समस्याएं थीं लेकिन येरो लैमर्स समाधान से प्रेरित यह स्क्रिप्ट इसे हल करती है। बस इसे अपने जेएस फ़ाइल में छोड़ दें और आनंद लें।
$(document).on('hide.bs.modal', '.modal', function (event) {
var padding_right = 0;
$.each($('.modal'), function(){
if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
padding_right = $(this).modal().data('bs.modal').scrollbarWidth
}
});
$('body').data('padding_right', padding_right + 'px');
});
$(document).on('hidden.bs.modal', '.modal', function (event) {
$('body').data('open_modals', $('body').data('open_modals') - 1);
if($('body').data('open_modals') > 0) {
$('body').addClass('modal-open');
$('body').css('padding-right', $('body').data('padding_right'));
}
});
$(document).on('shown.bs.modal', '.modal', function (event) {
if (typeof($('body').data('open_modals')) == 'undefined') {
$('body').data('open_modals', 0);
}
$('body').data('open_modals', $('body').data('open_modals') + 1);
$('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});इसकी जांच करें! इस समाधान ने मेरे लिए कुछ सरल CSS लाइनों की समस्या हल कर दी:
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}यहां एक लिंक दिया गया है जहां मैंने इसे पाया: बूटप्लेस बस यह सुनिश्चित करें कि शीर्ष पर प्रदर्शित होने के लिए .modual HTML कोड में दूसरा है, इसलिए CSS इसे "यहां तक" के रूप में पा सकता है।
मल्टी मोडल खोलने / बंद करने के लिए काम करें
jQuery(function()
{
jQuery(document).on('show.bs.modal', '.modal', function()
{
var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;
jQuery('.modal:visible').each(function()
{
maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
});
jQuery('.modal-backdrop').css('z-index', maxZ);
jQuery(this).css("z-index", maxZ + 1);
jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
});
jQuery(document).on('hidden.bs.modal', '.modal', function ()
{
if (jQuery('.modal:visible').length)
{
jQuery(document.body).addClass('modal-open');
var maxZ = 1040;
jQuery('.modal:visible').each(function()
{
maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
});
jQuery('.modal-backdrop').css('z-index', maxZ-1);
}
});
});डेमो
यहां कुछ CSS का चयन nth-of-typeकिया गया है जो चयनकर्ताओं को काम करता है:
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}बूटपाइली: http://bootply.com/86973
मेरे पास एक समान परिदृश्य था, और आर एंड डी के थोड़ा सा के बाद मुझे एक समाधान मिला। हालाँकि मैं JS में महान नहीं हूँ फिर भी मैं एक छोटी सी क्वेरी लिखने में कामयाब रहा।
http://jsfiddle.net/Sherbrow/ThLYb/
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('.ingredient-item').on('click', function(e){
e.preventDefault();
var content = $(this).find('p').text();
$('.modal-body').html(content);
});Modal.js में वैश्विक चर जोड़ें
var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data // शो फ़ंक्शन के अंदर चर जोड़ें - Modal.prototyp.backdrop
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"
that.$element
.show()
.scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+
this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclassअन्य समाधान मेरे लिए बॉक्स से बाहर काम नहीं करते थे। मुझे लगता है कि शायद इसलिए कि मैं बूटस्ट्रैप (3.3.2) के अधिक हालिया संस्करण का उपयोग कर रहा हूं .... ओवरले ऊपर दिखाई दे रहा था डायलॉग के ।
मैंने कोड को थोड़ा सा दर्शाया और उस हिस्से पर टिप्पणी की जो मोडल-बैकड्रॉप को समायोजित कर रहा था। यह मुद्दा तय किया।
var $body = $('body');
var OPEN_MODALS_COUNT = 'fv_open_modals';
var Z_ADJUSTED = 'fv-modal-stack';
var defaultBootstrapModalZindex = 1040;
// keep track of the number of open modals
if ($body.data(OPEN_MODALS_COUNT) === undefined) {
$body.data(OPEN_MODALS_COUNT, 0);
}
$body.on('show.bs.modal', '.modal', function (event)
{
if (!$(this).hasClass(Z_ADJUSTED)) // only if z-index not already set
{
// Increment count & mark as being adjusted
$body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
$(this).addClass(Z_ADJUSTED);
// Set Z-Index
$(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));
//// BackDrop z-index (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
//$('.modal-backdrop').not( '.' + Z_ADJUSTED )
// .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
// .addClass(Z_ADJUSTED);
}
});
$body.on('hidden.bs.modal', '.modal', function (event)
{
// Decrement count & remove adjusted class
$body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
$(this).removeClass(Z_ADJUSTED);
// Fix issue with scrollbar being shown when any modal is hidden
if($body.data(OPEN_MODALS_COUNT) > 0)
$body.addClass('modal-open');
});एक साइड नोट के रूप में, यदि आप इसे AngularJs में उपयोग करना चाहते हैं, तो बस कोड को अपने मॉड्यूल (.run) विधि के अंदर रखें।
दुर्भाग्य से मेरे पास टिप्पणी करने के लिए प्रतिष्ठा नहीं है, लेकिन यह ध्यान दिया जाना चाहिए कि 1040 जेड-इंडेक्स की हार्डकोडेड बेसलाइन के साथ स्वीकृत समाधान, जिंडेक्स गणना से बेहतर प्रतीत होता है जो पृष्ठ पर प्रदान किए जा रहे अधिकतम zIndex को खोजने की कोशिश करता है।
ऐसा प्रतीत होता है कि कुछ एक्सटेंशन / प्लगइन्स शीर्ष स्तर के DOM कंटेंट पर निर्भर करते हैं जो कि .Max की गणना इतनी बड़ी संख्या में करता है, कि यह zIndex को और अधिक नहीं बढ़ा सकता है। यह एक ऐसे मोडल में होता है जहां ओवरले गलत तरीके से दिखाई देता है (यदि आप Firebug / Google इंस्पेक्टर टूल का उपयोग करते हैं तो आपको 2 ^ n - 1 के आदेश पर एक zIndex दिखाई देगा)
मैं अलग-अलग कारण नहीं बता पा रहा हूं कि z- इंडेक्स के लिए Math.Max के विभिन्न रूपों के कारण क्या विशिष्ट है, लेकिन यह हो सकता है, और यह कुछ उपयोगकर्ताओं के लिए अद्वितीय दिखाई देगा। (ब्राउज़रस्टैक पर मेरे सामान्य परीक्षणों में यह कोड पूरी तरह से काम कर रहा था)।
आशा है कि यह किसी की मदद करता है।
मेरे मामले में समस्या एक ब्राउज़र एक्सटेंशन के कारण हुई थी जिसमें बूटस्ट्रैप.जेएस फाइलें शामिल हैं जहां शो इवेंट को दो बार और दो modal-backdropडिवीजनों को संभाला जाता है , लेकिन मोडल को बंद करते समय उनमें से केवल एक को हटा दिया जाता है।
पाया गया कि क्रोम में शरीर के तत्व में एक सबट्री मॉडिफिकेशन ब्रेकपॉइंट जोड़कर और modal-backdropडिव को जोड़कर ट्रैक किया गया ।
$(window).scroll(function(){
if($('.modal.in').length && !$('body').hasClass('modal-open'))
{
$('body').addClass('modal-open');
}
});अद्यतन: २२.०१.२०१ ९, १३.४१ मैंने झाई द्वारा समाधान को अनुकूलित किया, जो कि एक ही या अलग-अलग डेटा को एक से दूसरे फ़ॉरवर्ड या पीछे की ओर ले जाने के दौरान समान या अलग डायलॉग को बंद करने और खोलने का समर्थन करता है।
(function ($, window) {
'use strict';
var MultiModal = function (element) {
this.$element = $(element);
this.modalIndex = 0;
};
MultiModal.BASE_ZINDEX = 1040;
/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;
MultiModal.prototype.show = function (target) {
var that = this;
var $target = $(target);
// Bootstrap triggers the show event at the beginning of the show function and before
// the modal backdrop element has been created. The timeout here allows the modal
// show function to complete, after which the modal backdrop will have been created
// and appended to the DOM.
// we only want one backdrop; hide any extras
setTimeout(function () {
/* Count the number of triggered modal dialogs */
that.modalIndex++;
if (that.modalIndex >= MultiModal.MAX_INDEX) {
/* Collate the zIndexes of every open modal dialog according to its order */
that.collateZIndex();
}
/* Modify the zIndex */
$target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);
/* we only want one backdrop; hide any extras */
if (that.modalIndex > 1)
$('.modal-backdrop').not(':first').addClass('hidden');
that.adjustBackdrop();
});
};
MultiModal.prototype.hidden = function (target) {
this.modalIndex--;
this.adjustBackdrop();
if ($('.modal.in').length === 1) {
/* Reset the index to 1 when only one modal dialog is open */
this.modalIndex = 1;
$('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
var $modalBackdrop = $('.modal-backdrop:first');
$modalBackdrop.removeClass('hidden');
$modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);
}
};
MultiModal.prototype.adjustBackdrop = function () {
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};
MultiModal.prototype.collateZIndex = function () {
var index = 1;
var $modals = $('.modal.in').toArray();
$modals.sort(function(x, y)
{
return (Number(x.style.zIndex) - Number(y.style.zIndex));
});
for (i = 0; i < $modals.length; i++)
{
$($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
index++;
};
this.modalIndex = index;
this.adjustBackdrop();
};
function Plugin(method, target) {
return this.each(function () {
var $this = $(this);
var data = $this.data('multi-modal-plugin');
if (!data)
$this.data('multi-modal-plugin', (data = new MultiModal(this)));
if (method)
data[method](target);
});
}
$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;
$(document).on('show.bs.modal', function (e) {
$(document).multiModal('show', e.target);
});
$(document).on('hidden.bs.modal', function (e) {
$(document).multiModal('hidden', e.target);
});}(jQuery, window));मेरे लिए, इन सरल scss नियमों ने पूरी तरह से काम किया:
.modal.show{
z-index: 1041;
~ .modal.show{
z-index: 1043;
}
}
.modal-backdrop.show {
z-index: 1040;
+ .modal-backdrop.show{
z-index: 1042;
}
}यदि ये नियम आपके मामले में गलत मोडल के शीर्ष पर होने का कारण बनते हैं, तो या तो अपने मोडल डिव के क्रम को बदल दें, या ऊपर (यहां तक कि) को scss में बदल दें।
मॉडल्स की गिनती की जाँच करें और z- इंडेक्स के रूप में पृष्ठभूमि में मान जोड़ें
var zIndex = 1500 + ($('.modal').length*2) + 1;
this.popsr.css({'z-index': zIndex});
this.popsr.on('shown.bs.modal', function () {
$(this).next('.modal-backdrop').css('z-index', zIndex - 1);
});
this.popsr.modal('show');