Superposition de plusieurs modaux
J'ai besoin que la superposition montre au-dessus du premier modal, pas à l'arrière.
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});<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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</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 class="modal" id="myModal2" data-backdrop="static">
<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">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>J'ai essayé de changer le z-index de .modal-backdrop, mais cela devient un désordre.
Dans certains cas, j'ai plus de deux modaux sur la même page.
Après avoir constaté de nombreux correctifs, et aucun d'entre eux ne correspondait exactement à ce dont j'avais besoin, j'ai proposé une solution encore plus courte inspirée de @YermoLamers & @Ketwaroo.
Correction du z-index en arrière-plan
Cette solution utilise une setTimeout car le .modal-backdrop n'est pas créé lorsque l'événement show.bs.modal est déclenché.
$(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);
});
- Cela fonctionne pour chaque
.modalcréé sur la page (même les modaux dynamiques) - La toile de fond recouvre instantanément le modal précédent
Exemple jsfiddle
Si vous n'aimez pas l'index z codé en dur pour une raison quelconque, vous pouvez calculer l'index z le plus élevé sur la page comme ceci:
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;
Correction de la barre de défilement
Si votre page contient un modal qui dépasse la hauteur du navigateur, vous ne pouvez pas le faire défiler lorsque vous fermez un deuxième modal. Pour résoudre ce problème, ajoutez:
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
Versions
Cette solution a été testée avec bootstrap 3.1.0 - 3.3.5
Je me rends compte qu'une réponse a été acceptée, mais je suggère fortement de ne pas pirater bootstrap pour résoudre ce problème.
Vous pouvez très facilement obtenir le même effet en accrochant les gestionnaires d’événements shown.bs.modal et hidden.bs.modal et en y ajustant l’index z.
Un peu plus d'infos est disponible ici.
Cette solution fonctionne automatiquement avec des piles de modems arbitrairement profondes.
Le code source du script:
$(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');
});
});
Une version plus courte basée sur la suggestion de Yermo Lamers semble bien fonctionner. Même avec des animations de base comme l'ouverture/fermeture en fondu et même le journal fou de Batman. 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');
});
En combinant la réponse de A1rPun avec la suggestion de StriplingWarrior, j'ai proposé ceci:
$(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');
Fonctionne même pour les modaux dynamiques ajoutés après coup et supprime le problème de la deuxième barre de défilement. La chose la plus remarquable pour laquelle j'ai trouvé cela utile était d'intégrer les formulaires dans les modaux avec les commentaires de validation des alertes Bootbox, car ceux-ci utilisent des modaux dynamiques et vous obligent donc à lier l'événement au document plutôt qu'à. modaux.
J'ai créé un plugin Bootstrap qui intègre beaucoup des idées postées ici.
Démo sur Bootply: http://www.bootply.com/cObcYInvpq
Github: https://github.com/jhaygt/bootstrap-multimodal
Il aborde également le problème des modaux successifs, assombrissant de plus en plus le fond. Cela garantit qu'un seul fond est visible à la fois:
if(modalIndex > 0)
$('.modal-backdrop').not(':first').addClass('hidden');
L'index z du fond visible est mis à jour à la fois pour les événements show.bs.modal et hidden.bs.modal:
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));
Lors de la résolution du problème L'empilement de modaux fait défiler la page principale lors de la fermeture i a constaté que les versions les plus récentes de Bootstrap (au moins depuis la version 3.0.3) ne nécessitent aucun code supplémentaire pour empiler les modaux.
Vous pouvez ajouter plusieurs modaux (bien sûr, ayant un identifiant différent) sur votre page. Le seul problème rencontré lors de l'ouverture de plusieurs modaux est que la fermeture d'un supprime la classe modal-open pour le sélecteur de corps.
Vous pouvez utiliser le code Javascript suivant pour rajouter le modal-open:
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Dans le cas où vous n'avez pas besoin de l'effet de fond pour le modal empilé, vous pouvez définir data-backdrop="false".
Version 3.1.1. fixed Corrige le fond modal recouvrant la barre de défilement du modal , mais la solution ci-dessus semble également fonctionner avec les versions précédentes.
Enfin résolu. Je l'ai testé à bien des égards et fonctionne bien.
Voici la solution pour tous ceux qui ont le même problème: Modifiez la fonction Modal.prototype.show (à bootstrap.js ou modal.js).
DE:
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()
C’est le meilleur moyen que j’ai trouvé: vérifiez le nombre de modaux ouverts et modifiez l’indice z du modal et la toile de fond pour obtenir une valeur supérieure.
Essayez d’ajouter ce qui suit à votre JS au démarrage
$('#myModal2').on('show.bs.modal', function () {
$('#myModal').css('z-index', 1030); })
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal').css('z-index', 1040); })
Explication:
Après avoir joué avec les attributs (à l'aide de l'outil de développement de Chrome), je me suis rendu compte que toute valeur z-index inférieure à 1031 mettrait des éléments derrière le fond.
Donc, en utilisant les événements modaux de bootstrap, je règle le z-index sur 1030. Si #myModal2 est affiché, réglez le z-index sur 1040 si #myModal2 est masqué.
Chaque fois que vous exécutez la fonction sys.showModal, incrémentez z-index et définissez-le sur votre nouveau modal.
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');
travail pour ouvrir/fermer les multi-modaux
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);
}
});
});
Démo
La solution à ce problème pour moi était de NE PAS utiliser la classe "fade" sur mes divs modaux.
Un identifiant différent doit être attribué à chaque modal et chaque lien doit être ciblé vers un identifiant modal différent. Donc ça devrait être quelque chose comme ça:
<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: Bootstrap 3.3.4 a résolu ce problème (ainsi que d’autres problèmes modaux). Par conséquent, si vous pouvez mettre à jour vos CSS et JS d’amorçage, ce sera la meilleure solution. Si vous ne pouvez pas mettre à jour, la solution ci-dessous fonctionnera toujours et fera essentiellement la même chose que bootstrap 3.3.4 (recalculer et appliquer un remplissage).
Comme Bass Jobsen l'a souligné, les versions les plus récentes de Bootstrap ont résolu l'index z-index. La classe modal-open et padding-right étaient toujours des problèmes pour moi, mais ce script inspiré par la solution de Yermo Lamers le résout. Déposez-le simplement dans votre fichier JS et profitez-en.
$(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'));
});
J'ai eu un scénario similaire, et après un peu de R & D, j'ai trouvé une solution. Bien que je ne sois pas bon en JS, j'ai quand même réussi à écrire une petite requête.
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);
});
Les autres solutions ne fonctionnaient pas pour moi hors de la boîte. Je pense que peut-être parce que j'utilise une version plus récente de Bootstrap (3.3.2) ... la superposition apparaissait au-dessus de le dialogue modal.
J'ai refactoré le code un peu et commenté la partie qui ajustait le fond modal. Cela a résolu le problème.
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');
});
En remarque, si vous souhaitez utiliser cela dans AngularJs, il suffit de placer le code dans la méthode .run () de votre module.
Voici quelques exemples de CSS utilisant les sélecteurs nth-of-type qui semblent fonctionner:
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
Bootply: http://bootply.com/86973
Dans mon cas, le problème était dû à une extension de navigateur incluant les fichiers bootstrap.js où l'événement show traité deux fois et deux divs modal-backdrop sont ajoutés, mais lors de la fermeture du modal, un seul d'entre eux est supprimé.
Cela a été constaté en ajoutant un point d'arrêt de modification de sous-arbre à l'élément body en chrome et un suivi en ajoutant les divs modal-backdrop.
Si vous souhaitez qu'un modal spécifique apparaisse au-dessus d'un autre modal ouvert, essayez d'ajouter le code HTML du modal le plus haut after l'autre modal div.
Cela a fonctionné pour moi:
<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" ... />
Aucune solution de script, n'utilisant que css si vous avez deux couches de modaux, définissez le deuxième modal sur un indice z supérieur
.second-modal { z-index: 1070 }
div.modal-backdrop + div.modal-backdrop {
z-index: 1060;
}
Parfois, une séquence peut causer le désordre! Écrire en premier modal puis en second modal
Malheureusement, je n'ai pas la réputation de commenter, mais il convient de noter que la solution acceptée avec la ligne de base codée en dur d'un index z 1040 semble être supérieure au calcul zIndex qui tente de trouver le zIndex maximum rendu sur la page.
Il semble que certaines extensions/plugins s'appuient sur un contenu DOM de niveau supérieur, ce qui rend le calcul .Max si obscurément grand, qu'il ne peut pas incrémenter davantage le zIndex. Cela crée un modal où la superposition apparaît de manière incorrecte sur le modal (si vous utilisez les outils Firebug/Google Inspector, vous verrez un zIndex de l'ordre de 2 ^ n - 1).
Je n'ai pas été en mesure d'isoler la raison précise pour laquelle les différentes formes de Math.Max for z-Index aboutissent à ce scénario, mais cela peut arriver et il apparaîtra comme unique à quelques utilisateurs. (Mes tests généraux sur browserstack ont fait que ce code fonctionne parfaitement).
J'espère que ça aide quelqu'un.
Ajouter une variable globale dans modal.js
var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data
// affiche la fonction dans la variable d'ajout - Modal.prototype.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
$(window).scroll(function(){
if($('.modal.in').length && !$('body').hasClass('modal-open'))
{
$('body').addClass('modal-open');
}
});
Regarde ça! Cette solution a résolu le problème pour moi, quelques lignes CSS simples:
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
Voici un lien vers l'endroit où je l'ai trouvé: Bootply Assurez-vous simplement que le fichier .modual devant apparaître en haut est le deuxième en code HTML, de sorte que CSS puisse le trouver "même".
Si vous recherchez une solution Bootstrap 4, il existe une solution simple utilisant du CSS pur:
.modal.fade {
background: rgba(0,0,0,0.5);
}
Pour moi, ces règles simples de scss ont parfaitement fonctionné:
.modal.show{
z-index: 1041;
~ .modal.show{
z-index: 1043;
}
}
.modal-backdrop.show {
z-index: 1040;
+ .modal-backdrop.show{
z-index: 1042;
}
}
Si ces règles font en sorte que le mauvais modal domine dans votre cas, modifiez l'ordre de vos divs modaux ou changez (impair) en (pair) dans le fichier scss précédent.
Essayez ceci http://nakupanda.github.io/bootstrap3-dialog/#opening-multiple-dialogs
Cela devrait facilement résoudre votre problème.
Mise à jour: 22.01.2019, 13.41 J’ai optimisé la solution avec jhay, qui prend également en charge la fermeture et l’ouverture de dialogues identiques ou différents, par exemple lors du passage progressif ou inverse de données détaillées.
(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));