Ho bisogno che l'overlay sia mostrato sopra il primo modale, non sul retro.
Ho provato a cambiare il z-indexdi.modal-backdrop , ma diventa un casino.
In alcuni casi ho più di due modali nella stessa pagina.
Ho bisogno che l'overlay sia mostrato sopra il primo modale, non sul retro.
Ho provato a cambiare il z-indexdi.modal-backdrop , ma diventa un casino.
In alcuni casi ho più di due modali nella stessa pagina.
Risposte:
Dopo aver visto molte correzioni per questo, e nessuna di queste era esattamente ciò di cui avevo bisogno, ho trovato una soluzione ancora più breve che si ispira a @YermoLamers & @Ketwaroo.
Sfondo z-index fix
Questa soluzione utilizza a setTimeoutperché .modal-backdropnon viene creata quando show.bs.modalviene attivato l'evento .
$(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);
});.modalcreato sulla pagina (anche modali dinamici)Se non ti piace l'indice z codificato per qualsiasi motivo, puoi calcolare l'indice z più alto sulla pagina in questo modo:
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;Correzione barra di scorrimento
Se sulla tua pagina è presente un modale che supera l'altezza del browser, non puoi scorrere al suo interno quando chiudi un secondo modale. Per correggere questo aggiungere:
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});Versioni
Questa soluzione è stata testata con bootstrap 3.1.0 - 3.3.5
.not(this)alla seconda riga) per farlo funzionare con bootstrap datepicker var zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
Mi rendo conto che una risposta è stata accettata, ma consiglio vivamente di non hackerare bootstrap per risolvere questo problema.
Puoi facilmente ottenere lo stesso effetto collegando i gestori di eventi mostrati.bs.modal e hidden.bs.modal e regolando lì l'indice z.
Altre informazioni sono disponibili qui.
Questa soluzione funziona automaticamente con modali arbitrariamente profondi.
Il codice sorgente dello 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');
});
});Qualcosa di più corto sulla base del suggerimento di Yermo Lamers, sembra funzionare bene. Anche con animazioni di base come dissolvenza in apertura / chiusura e persino il giornale pazzo di Batman ruota. 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-openclasse sull'elemento body: jsfiddle.net/vkyjocyn
Combinando la risposta di A1rPun con il suggerimento di StriplingWarrior, ho pensato a questo:
$(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');Funziona anche con modali dinamici aggiunti dopo il fatto e rimuove il problema della seconda barra di scorrimento. La cosa più notevole per cui l'ho trovato utile è stata l'integrazione di moduli all'interno di modali con feedback di convalida dagli avvisi Bootbox, poiché quelli usano modali dinamici e quindi richiedono di associare l'evento al documento piuttosto che a .modal, dal momento che si collega solo a quello esistente modali.
Ho creato un plug-in Bootstrap che incorpora molte delle idee pubblicate qui.
Demo su Bootply: http://www.bootply.com/cObcYInvpq
Github: https://github.com/jhaygt/bootstrap-multimodal
Risolve anche il problema con successive modali che rendono lo sfondo sempre più scuro. Ciò garantisce che sia visibile solo uno sfondo alla volta:
if(modalIndex > 0)
$('.modal-backdrop').not(':first').addClass('hidden');L'indice z dello sfondo visibile viene aggiornato su entrambi gli eventi show.bs.modale hidden.bs.modal:
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));Quando si risolvono i modali Stacking scorre la pagina principale quando uno è chiuso ho scoperto che le versioni più recenti di Bootstrap (almeno dalla versione 3.0.3) non richiedono alcun codice aggiuntivo per impilare i modali.
Puoi aggiungere più di un modale (ovviamente con un ID diverso) alla tua pagina. L'unico problema riscontrato quando si apre più di un modale sarà che chiudendo uno si rimuove ilmodal-open classe per il selettore del corpo.
È possibile utilizzare il seguente codice Javascript per aggiungere nuovamente modal-open:
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});Nel caso in cui non sia necessario l'effetto di sfondo per il modale in pila, è possibile impostare data-backdrop="false" .
Versione 3.1.1. risolto Fix modale sullo sfondo sovrapposto alla barra di scorrimento del modale , ma la soluzione sopra sembra funzionare anche con le versioni precedenti.
Finalmente risolto. L'ho provato in molti modi e funziona benissimo.
Ecco la soluzione per chiunque abbia lo stesso problema: cambia la funzione Modal.prototype.show (su bootstrap.js o modal.js)
A PARTIRE DAL:
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()PER:
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()È il modo migliore che ho trovato: controlla quante modali sono aperte e cambia l'indice z del modale e lo sfondo su un valore più alto.
Se stai cercando la soluzione Bootstrap 4, ce n'è una facile che usa CSS puro:
.modal.fade {
background: rgba(0,0,0,0.5);
}Prova ad aggiungere quanto segue al tuo JS all'avvio
$('#myModal2').on('show.bs.modal', function () {
$('#myModal').css('z-index', 1030); })
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal').css('z-index', 1040); })Spiegazione:
Dopo aver giocato con gli attributi (usando lo strumento dev di Chrome), mi sono reso conto che qualsiasi z-indexvalore sottostante 1031metterà le cose dietro lo sfondo.
Quindi, utilizzando le maniglie degli eventi modali di bootstrap ho impostato la z-indexa 1030. Se #myModal2viene mostrato e z-indexriportare indietro su 1040se #myModal2è nascosto.
Ogni volta che esegui sys.showModal incrementa la funzione z-index e lo imposta sul tuo nuovo modale.
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');La soluzione a questo per me era di NON usare la classe "fade" sui miei div modali.
Nessuna soluzione di script, usando solo css dato che hai due livelli di modali, imposta il 2 ° modale su un indice z più alto
.second-modal { z-index: 1070 }
div.modal-backdrop + div.modal-backdrop {
z-index: 1060;
}Se vuoi che un modale specifico appaia sopra un altro modale aperto, prova ad aggiungere l'HTML del modale più in alto dopo l'altro modale div.
Questo ha funzionato per me:
<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" ... />La mia soluzione per bootstrap 4, lavorando con profondità illimitata di modali e modali dinamici.
$('.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 ciascun modale deve essere assegnato un ID diverso e ogni collegamento deve essere indirizzato a un ID modale diverso. Quindi dovrebbe essere qualcosa del genere:
<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 ha risolto questo problema (e altri problemi modali), quindi se puoi aggiornare il tuo bootstrap CSS e JS sarebbe la soluzione migliore. Se non riesci ad aggiornare la soluzione di seguito funzionerà comunque e sostanzialmente farà la stessa cosa di bootstrap 3.3.4 (ricalcola e applica il riempimento).
Come sottolineato da Bass Jobsen, le versioni più recenti di Bootstrap hanno risolto l'indice z. La classe open modale e il padding-right erano ancora problemi per me, ma questo script ispirato alla soluzione di Yermo Lamers lo risolve. Rilascialo nel tuo file JS e divertiti.
$(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'));
});Controllalo! Questa soluzione ha risolto il problema per me, poche semplici linee CSS:
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}Ecco un link a dove l'ho trovato: Bootply Assicurati solo che il .modual che deve apparire in alto sia il secondo nel codice HTML, quindi CSS può trovarlo come "pari".
lavorare per aprire / chiudere multi modali
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);
}
});
});dimostrazione
Per me, queste semplici regole scss hanno funzionato perfettamente:
.modal.show{
z-index: 1041;
~ .modal.show{
z-index: 1043;
}
}
.modal-backdrop.show {
z-index: 1040;
+ .modal-backdrop.show{
z-index: 1042;
}
}Se queste regole fanno sì che il modale sbagliato sia in cima al tuo caso, cambia l'ordine dei tuoi div modali o cambia (dispari) in (pari) in sopra scss.
Ecco alcuni CSS che utilizzano nth-of-typeselettori che sembrano funzionare:
.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
Avevo uno scenario simile e dopo un po 'di ricerca e sviluppo ho trovato una soluzione. Anche se non sono ancora bravo in JS, sono riuscito a scrivere una piccola query.
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);
});Aggiungi la variabile globale in modal.js
var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data // mostra la funzione all'interno di aggiungi variabile - 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 addclassLe altre soluzioni non hanno funzionato per me fuori dalla scatola. Penso forse perché sto usando una versione più recente di Bootstrap (3.3.2) .... la sovrapposizione appariva in cima alla finestra di dialogo modale.
Ho riformulato un po 'il codice e commentato la parte che stava regolando lo sfondo modale. Ciò ha risolto il problema.
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');
});Come nota a margine, se vuoi usarlo in AngularJs, inserisci semplicemente il codice all'interno del metodo .run () del tuo modulo.
Sfortunatamente non ho la reputazione di commentare, ma va notato che la soluzione accettata con la linea di base hardcoded di un indice z 1040 sembra essere superiore al calcolo zIndex che cerca di trovare il massimo zIndex visualizzato sulla pagina.
Sembra che alcune estensioni / plugin si basino su contenuti DOM di livello superiore che rendono il calcolo .Max un numero così oscenamente grande, che non può incrementare ulteriormente zIndex. Ciò si traduce in un modale in cui la sovrapposizione appare in modo errato sul modale (se usi gli strumenti Firebug / Google Inspector vedrai uno zIndex nell'ordine di 2 ^ n - 1)
Non sono stato in grado di isolare quale sia il motivo specifico che le varie forme di Math.Max per z-Index portano a questo scenario, ma può succedere e apparirà unico per pochi utenti. (I miei test generali sul browser hanno funzionato perfettamente con questo codice).
Spero che questo aiuti qualcuno.
Nel mio caso il problema è stato causato da un'estensione del browser che include i file bootstrap.js in cui l'evento show è stato gestito due volte e due modal-backdrop sono stati aggiunti div, ma quando si chiude il modale ne viene rimosso solo uno.
Abbiamo scoperto che aggiungendo un breakpoint di modifica della sottostruttura all'elemento body in chrome, e monitorato aggiungendo i modal-backdropdiv.
$(window).scroll(function(){
if($('.modal.in').length && !$('body').hasClass('modal-open'))
{
$('body').addClass('modal-open');
}
});Aggiornamento: 22.01.2019, 13.41 Ho ottimizzato la soluzione con jhay, che supporta anche la chiusura e l'apertura di finestre di dialogo uguali o diverse quando, ad esempio, si passa da un dato di dettaglio all'altro in avanti o indietro.
(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));Controlla il conteggio dei modali e aggiungi il valore allo sfondo come indice 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');