Donc, j'utilise ce code pour ouvrir une autre fenêtre modale dans une fenêtre modale ouverte actuelle:
<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 se duplique. Je suppose que le modal actuel est toujours en train de disparaître. Cependant, il semble très peu lisse et bégaiement.
J'apprécierais toutes les suggestions pour résoudre ce problème.
De plus, la manière de construire cela dans un événement onclick n'est-elle pas professionnelle?
Je travaille avec la version 3.0 de bootstrap.
Edit: Je suppose qu'il est nécessaire de réduire le temps de fondu d'un modal. Comment est-ce possible?
Réponses:
data-dismiss
fait fermer la fenêtre modale actuelledata-toggle
ouvre un nouveau modal avec lehref
contenu qu'il contientou
faites-nous savoir si cela fonctionne.
la source
data-dismiss
fait. Il ferme la fenêtre actuelle et en ouvre une nouvelle. Pouvez-vous publier votre code dansbootply
oujsfiddle
?.modal { overflow-y: auto }
résout le problème de défilement BS4.Ma solution ne ferme pas le modal inférieur, mais se superpose vraiment. Il préserve correctement le comportement de défilement. Testé dans Bootstrap 3. Pour que les modaux s'empilent comme prévu, vous devez les ordonner dans votre balisage Html du plus bas au plus élevé.
MISE À JOUR: Lorsque vous avez empilé des modaux, tous les arrière-plans apparaissent sous le modal le plus bas. Vous pouvez résoudre ce problème en ajoutant le CSS suivant:
Cela donnera l'apparence d'un fond modal sous le modal visible le plus haut. De cette façon, il grise vos modaux inférieurs en dessous.
la source
Pour ouvrir une autre fenêtre modale dans une fenêtre modale actuellement ouverte,
vous pouvez utiliser bootstrap-modal
DÉMO bootstrap-modal
la source
essaye ça
la source
Vous pouvez réellement détecter la fermeture de l'ancien modal en appelant l'
hidden.bs.modal
événement:Pour plus d'informations: http://getbootstrap.com/javascript/#modals-events
la source
Mise à jour pour 2018 - Utilisation de Bootstrap 4
J'ai trouvé que la plupart des réponses semblent contenir beaucoup de jQuery inutiles. Pour ouvrir un modal à partir d'un autre modal peut être fait simplement en utilisant les événements fournis par Bootstrap tels que
show.bs.modal
. Vous voudrez peut-être également du CSS pour gérer les superpositions de fond. Voici les 3 modaux ouverts d'un autre scénario ...Ouvrir le modal à partir d'un autre modal (garder le premier modal ouvert)
Un problème potentiel dans ce cas est que l'arrière-plan du 2ème modal cache le 1er modal. Pour éviter cela, créez le 2ème modal
data-backdrop="static"
, et ajoutez du CSS pour corriger les z-index des arrière-plans ...https://www.codeply.com/go/NiFzSCukVl
Ouvrir le modal depuis un autre modal (fermer le 1er modal)
Ceci est similaire au scénario ci-dessus, mais comme nous fermons le 1er modal lorsque le 2ème est ouvert, il n'est pas nécessaire de corriger le CSS de fond. Une fonction simple qui gère le 2ème
show.bs.modal
événement modal ferme le 1er modal.https://www.codeply.com/go/ejaUJ4YANz
Ouvrir le modal dans un autre modal
Le dernier scénario modal multiple ouvre le 2ème modal à l'intérieur du 1er 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.
https://www.codeply.com/go/iSbjqubiyn
la source
.modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
Modals en modal:
la source
Travailler sur un projet qui a beaucoup de modaux appelant d'autres modaux et quelques types HTML qui ne sauraient peut-être pas le lancer à chaque fois pour chaque bouton. Arrivé à une conclusion similaire à @gmaggio, à contrecœur après avoir parcouru le long chemin en premier.
EDIT: prend désormais en charge les modaux appelés via javascript.
EDIT: L'ouverture d'un modal de défilement à partir d'un autre modal fonctionne maintenant.
Placez simplement le bouton d'appel modal comme d'habitude, et s'il est sélectionné pour être à l'intérieur d'un modal, il fermera d'abord le bouton actuel avant d'ouvrir celui spécifié dans data-target. Notez que cela
relatedTarget
est fourni par Bootstrap.J'ai également ajouté ce qui suit pour lisser un peu la décoloration: je suis sûr que plus peut être fait.
la source
La documentation Twitter indique qu'un code personnalisé est requis ...
Cela fonctionne sans JavaScript supplémentaire, cependant, un CSS personnalisé serait fortement recommandé ...
la source
z-index: 1080 !important;
Pour bootstrap 4, pour développer la réponse de @ helloroy, j'ai utilisé ce qui suit; -
L'avantage de ce qui précède est qu'il n'aura aucun effet lorsqu'il n'y a qu'un seul modal, il ne se déclenche que pour les multiples. Deuxièmement, il délègue la gestion à l'organisme pour s'assurer que les futurs modaux qui ne sont pas actuellement générés sont toujours pris en charge.
Mettre à jour
Le passage à une solution combinée js / css améliore l'apparence - l'animation de fondu continue de fonctionner sur le fond; -
combiné avec le css suivant; -
Cela gérera les modaux imbriqués jusqu'à 4 de profondeur, ce qui est plus que ce dont j'ai besoin.
la source
Essaye ça:
Ce simple hack fonctionne pour moi.
la source
Pour quelqu'un qui utilise bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/
la source
J'ai également eu des problèmes avec mes modaux scrollables, alors j'ai fait quelque chose comme ceci:
Il servira pour tout modal dans un modal qui vient à apparaître. Notez que le premier est fermé afin que le second puisse apparaître. Aucun changement dans la structure Bootstrap.
la source
J'ai emprunté un itinéraire différent tous ensemble, j'ai décidé de les "désemboîter". Peut-être que quelqu'un trouvera cela pratique ...
la source
Mon code fonctionne bien en utilisant le rejet de données.
la source
Fermez le premier modal Bootstrap et ouvrez le nouveau modal dynamiquement.
la source
Pourquoi ne pas simplement changer le contenu du corps modal?
Dans le modal il suffit de mettre un lien ou un bouton
Si vous souhaitez simplement basculer entre 2 modaux:
Dans le modal il suffit de mettre un lien ou un bouton
la source
essaye ça:
la source
La réponse donnée par H Dog est excellente, mais cette approche me donnait en fait un scintillement modal dans Internet Explorer 11. Bootstrap masquera d'abord le modal en supprimant la classe 'modal-open', puis (en utilisant la solution H Dogs) nous ajoutons le à nouveau la classe 'modal-open'. Je soupçonne que cela cause en quelque sorte le scintillement que je voyais, peut-être en raison d'un rendu HTML / CSS lent.
Une autre solution consiste à empêcher le bootstrap en supprimant la classe «modal-open» de l'élément body en premier lieu. En utilisant Bootstrap 3.3.7, ce remplacement de la fonction interne hideModal fonctionne parfaitement pour moi.
Dans ce remplacement, la classe 'modal-open' n'est supprimée que lorsqu'il n'y a pas de modaux visibles à l'écran. Et vous empêchez une image de supprimer et d'ajouter une classe à l'élément body.
Incluez simplement le remplacement après le chargement de bootstrap.
la source
la source