Bootstrap: Ouvrir un autre modal en modal
Donc, j'utilise ce code pour ouvrir une autre fenêtre modale dans une fenêtre modale ouverte:
<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>
Ce qui se passe, c’est que pendant environ 500 ms, la barre de défilement sera dupliquée. J'imagine que le modal actuel s'efface toujours. Cependant, il semble très lisse et le bégaiement.
J'apprécierais toutes les suggestions pour résoudre ce problème.
Aussi, est-ce que la manière de construire cela dans un événement onclick non professionnel est?
Je travaille avec la version 3.0 de bootstrap.
Edit: Je suppose qu'il est nécessaire de réduire le temps de fondu en fondu. Comment est-ce possible?
data-dismiss fait fermer la fenêtre modale actuelle
data-toggle ouvre un nouveau modal avec le contenu href à l'intérieur
<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>
ou
<a data-dismiss="modal" onclick="call the new div here">Click</a>
laissez-nous savoir si cela fonctionne.
- Vous voudrez peut-être aussi jeter un coup d'œil autour de Documentation modale
Ma solution ne ferme pas le modal inférieur, mais se superpose réellement. Cela préserve correctement le comportement de défilement. Testé dans Bootstrap 3. Pour que les modaux s'empilent comme prévu, vous devez les avoir ordonnés dans votre balise HTML du plus bas au plus élevé.
$(document).on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});UPDATE: Lorsque vous avez empilé des modaux, tous les fonds apparaissent sous le modal le plus bas. Vous pouvez résoudre ce problème en ajoutant le CSS suivant:
.modal-backdrop {
visibility: hidden !important;
}
.modal.in {
background-color: rgba(0,0,0,0.5);
}
Cela donnera l'apparence d'un fond modal en dessous du modal visible le plus haut. De cette façon, les niveaux inférieurs sont grisés.
Pour ouvrir une autre fenêtre modale dans une fenêtre modale ouverte,
vous pouvez utiliser bootstrap-modal
Vous pouvez réellement détecter la fermeture de l'ancien modal en appelant l'événement hidden.bs.modal:
$('.yourButton').click(function(e){
e.preventDefault();
$('#yourFirstModal')
.modal('hide')
.on('hidden.bs.modal', function (e) {
$('#yourSecondModal').modal('show');
$(this).off('hidden.bs.modal'); // Remove the 'on' event binding
});
});
Pour plus d'informations: http://getbootstrap.com/javascript/#modals-events
essaye ça
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>
<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test2">Open Modal 2</button>
</div>
</div>
</div>
</div>
<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
content
</div>
</div>
</div>
</div>
</body>
</html>Modaux en modal:
$('.modal-child').on('show.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 0);
});
$('.modal-child').on('hidden.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 1);
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>
<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
<a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header 1</h4>
</div>
<div class="modal-body">
<p>Two modal body…1</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header 2</h4>
</div>
<div class="modal-body">
<p>Modal body…2</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>Twitter docs indique qu'un code personnalisé est requis ...
Cela fonctionne sans JavaScript supplémentaire, bien que __., CSS personnalisé serait fortement recommandé ...
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-info">
<div class="modal-header btn-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalOneLabel">modalOne</h4>
</div>
<div id="thismodalOne" class="modal-body bg-info">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
Launch demo modal
</button>
<div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
<h3>EXAMPLE</h3>
</div>
</div>
<div class="modal-footer btn-info" id="woModalFoot">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Form Modals -->Travailler sur un projet comportant de nombreux modaux appelant d’autres modaux et quelques types HTML ne sachant peut-être pas l’initier à chaque fois pour chaque bouton . Nous sommes parvenus à la même conclusion que @gmaggio, à contrecœur après avoir parcouru le long chemin en premier .
EDIT: supporte maintenant les modaux appelés via javascript.
EDIT: L’ouverture d’un modal de défilement depuis un autre modal fonctionne désormais.
$(document).on('show.bs.modal', function (event) {
if (!event.relatedTarget) {
$('.modal').not(event.target).modal('hide');
};
if ($(event.relatedTarget).parents('.modal').length > 0) {
$(event.relatedTarget).parents('.modal').modal('hide');
};
});
$(document).on('shown.bs.modal', function (event) {
if ($('body').hasClass('modal-open') == false) {
$('body').addClass('modal-open');
};
});
Il suffit de placer le bouton d’appel modal comme d'habitude, et s'il est ramassé comme étant dans un modal, le premier sera fermé avant d'ouvrir celui spécifié dans data-target . Notez que relatedTarget est fourni par Bootstrap.
J'ai également ajouté ce qui suit pour atténuer un peu les effets de fondu: Je suis sûr que nous pouvons en faire plus.
.modal-backdrop.fade + .modal-backdrop.fade {
transition: opacity 0.40s linear 0s;
}
Pour quelqu'un qui utilise bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/
var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
$('.modal-backdrop:last').css('zIndex',1051+modal_lv);
$(e.currentTarget).css('zIndex',1052+modal_lv);
modal_lv++
});
$('.modal').on('hidden.bs.modal', function (e) {
modal_lv--
});<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
Launch demo modal a
</button>
<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="my-3">That's all.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Essaye ça:
// Hide the login modal
$('#login').modal('hide');
// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);
Ce simple hack fonctionne pour moi.
Pour bootstrap 4, pour développer la réponse de @ helloroy, j'ai utilisé ce qui suit: -
var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
if ( modal_lv > 0 )
{
$('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
$(e.target).css('zIndex',1051+modal_lv) ;
}
modal_lv++ ;
}).on('hidden.bs.modal', function() {
if ( modal_lv > 0 )
modal_lv-- ;
});
L’avantage de ce qui précède est qu’il n’aura aucun effet s’il n’ya qu’un seul modal, il ne prend en compte que les multiples. Deuxièmement, il délègue le traitement au corps pour s'assurer que les futurs modaux qui ne sont pas générés sont toujours pris en compte.
Mettre à jour
Le passage à une solution combinée js/css améliore l’apparence - l’animation de fondu continue de fonctionner sur le fond; -
var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
if ( modal_lv > 0 )
$(e.target).css('zIndex',1051+modal_lv) ;
modal_lv++ ;
}).on('hidden.bs.modal', function() {
if ( modal_lv > 0 )
modal_lv-- ;
});
combiné avec le css suivant: -
.modal-backdrop ~ .modal-backdrop
{
z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
z-index : 1053 ;
}
Cela gérera les modaux imbriqués jusqu'à 4 profonds, ce qui est plus que nécessaire.
Mise à jour pour 2018 - Utilisation de Bootstrap 4
J'ai trouvé la plupart des réponses semblent avoir beaucoup de jQuery inutile. Pour ouvrir un modal à partir d'un autre modal, vous pouvez simplement utiliser les événements fournis par Bootstrap, tels que "show.bs.modal". Vous voudrez peut-être aussi que certains CSS gèrent les superpositions de fond. Voici les 3 modaux ouverts d'un autre scénario ...
Open modal depuis un autre modal (garder le 1er modal ouvert)
<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>
Un problème potentiel dans ce cas-ci est que le fond de la 2ème modale cache la 1ère modale. Pour éviter cela, créez le 2nd code data-backdrop="static" modal et ajoutez du code CSS pour corriger les index z des fonds.
/* 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
Ouvrir le modal d'un autre modal (fermer le 1er modal)
Ce scénario est similaire au scénario ci-dessus, mais étant donné que nous fermons le premier modal lors de l'ouverture du deuxième, le correctif CSS d'arrière-plan n'est pas nécessaire. Une fonction simple qui gère l'événement 2nd modals show.bs.modal ferme le 1er modal.
$ ("# monModal2"). sur ('show.bs.modal', fonction (e) { $ ("# monModal1"). modal ("masquer"); });
https://www.codeply.com/go/ejaUJ4YANz
Ouvrir modal à l'intérieur un autre modal
Le dernier scénario à plusieurs modaux ouvre le deuxième modal dans le premier modal. Dans ce cas, le balisage pour le 2ème est placé à l'intérieur du 1er. Aucun CSS ou jQuery supplémentaire n'est nécessaire.
<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>
J'ai emprunté un itinéraire différent tous ensemble, j'ai décidé de les "détourner". Peut-être que quelqu'un trouvera cela utile ...
var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal"); //get reference to nested modal
$m1.after($innermodal); // snatch it out of inner modal and put it after.
J'ai également eu quelques problèmes avec mes modaux de défilement, alors j'ai fait quelque chose comme ça:
$('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
// BS adds some padding-right to acomodate the scrollbar at right
$('body').removeAttr('style');
})
$(".modal [data-toggle='modal']").click(function(){
$(this).closest(".modal").modal('hide');
});
Il servira pour tout modal dans un modal qui vient à apparaître . Notez que le premier est fermé pour que le second puisse apparaître . Aucun changement dans la structure Bootstrap.
Mon code et mon travail fonctionne si bien
<li class="step1">
<a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
<p class="text-label">Step 1</p>
<p class="text-text">Plan your Regime</p>
</a>
</li>
<li class="step2">
<a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
<p class="text-label">Step 2</p>
<p class="text-text">Plan your menu</p>
</a>
</li>
<li class="step3 active">
<a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
<p class="text-label">Step 3</p>
<p class="text-text">This Step is Undone.</p>
</a>
</li>
Fermez le premier modal Bootstrap et ouvrez le nouveau modal dynamiquement.
$('#Modal_One').modal('hide');
setTimeout(function () {
$('#Modal_New').modal({
backdrop: 'dynamic',
keyboard: true
});
}, 500);
essaye ça:
$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
if($(".modal:visible").length > 0) {
//Slap the class on it (wait a moment for things to settle)
setTimeout(function() {
$('body').addClass('modal-open');
},100)
}
});
Pourquoi ne pas simplement changer le contenu du corps modal?
window.switchContent = function(myFile){
$('.modal-body').load(myFile);
};
Dans le modal il suffit de mettre un lien ou un bouton
<a href="Javascript: switchContent('myFile.html'); return false;">
click here to load another file</a>
Si vous voulez juste changer entre 2 modaux:
window.switchModal = function(){
$('#myModal-1').modal('hide');
setTimeout(function(){ $('#myModal-2').modal(); }, 500);
// the setTimeout avoid all problems with scrollbars
};
Dans le modal il suffit de mettre un lien ou un bouton
<a href="Javascript: switchModal(); return false;">
click here to switch to the second modal</a>
La réponse donnée par H Dog est excellente, mais cette approche me permettait en fait de scintiller modal dans Internet Explorer 11.. Solution H Dogs), nous ajoutons à nouveau la classe «modal-open». Je soupçonne que cela cause en quelque sorte le scintillement que je voyais, peut-être à cause de certains rendus html/css lents.
Une autre solution consiste à empêcher bootstrap de supprimer la classe «modal-open» de l'élément body en premier lieu. Avec bootstrap 3.3.7, cette substitution de la fonction interne hideModal fonctionne parfaitement pour moi.
$.fn.modal.Constructor.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
if ($(".modal:visible").length === 0) {
that.$body.removeClass('modal-open')
}
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}
Dans cette substitution, la classe 'modal-open' n'est supprimée que lorsqu'il n'y a pas de modaux visibles à l'écran. Et vous empêchez un cadre de supprimer et d'ajouter une classe à l'élément body.
Il suffit d'inclure le remplacement après le chargement de l'amorçage.