Bootstrap: ouvrir un autre modal en modal

95

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?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
la source

3

Un exemple de travail peut être trouvé à bootply.com/lvKQA2AM28

CrandellWS

86

data-dismiss fait fermer la fenêtre modale actuelle

data-toggleouvre un nouveau modal avec le hrefcontenu qu'il contient

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

ou

<a data-dismiss="modal" onclick="call the new div here">Click</a>

faites-nous savoir si cela fonctionne.

Vous pouvez également consulter la documentation modale

Jayeshkv
la source

Merci, cela fonctionne et évite d'utiliser "onclick". Mais l'animatiom double toujours la barre de défilement pendant une seconde.

AlexioVay

@ user2829128 c'est ce que data-dismissfait. Il ferme la fenêtre actuelle et en ouvre une nouvelle. Pouvez-vous publier votre code dans bootplyou jsfiddle?

jayeshkv

14

Le défilement ne fonctionnerait pas sur le deuxième modal si la hauteur est longue.

Giraldi

Même chose ici avec bootstrap v4. Lorsque je clique sur le bouton du premier mondal, il s'ouvre en autre modal, le deuxième modal s'affiche avec un défilement du corps. Les problèmes sont en classe .modal-open pour le corps. Il supprime lorsque nous cliquons et ne l'ajoutons plus.

fdrv

7

.modal { overflow-y: auto }résout le problème de défilement BS4.

Riki137

84

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é.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

Développer l'extrait

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:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

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.

Chien H
la source

2

Les éléments plus loin dans le balisage de page ont un z-index naturellement plus élevé et se superposeront aux éléments apparus plus tôt dans le balisage. Sauf si vous définissez un z-index explicite.

H Dog

1

@H Dog: exactement ce dont j'avais besoin :) fonctionne parfaitement. Merci!

Tobias Koller

2

Vraiment légendaire !! Je retournais chaque fois que quelqu'un suggérait d'utiliser un plugin pour cela ... je voulais juste avoir une solution simple pour un problème simple et voilà ... Bravo!

Fr0zenFyr

2

Grand merci, pour VOTRE aide. Votre solution a été résolue mon problème, quand j'utilise deux modaux en même temps !!!!!

Levon

3

Javascript a fonctionné pour Bootstrap 4, mais pas CSS. Au lieu de cela, j'ai caché la toile de fond, puis j'ai ajouté .modal: after {content: ""; bloc de visualisation; arrière-plan: rgba (0,0,0, .5); position: fixe; haut: 0; bas: 0; largeur: 100%; indice z: -1; }

Jason G.

28

Pour ouvrir une autre fenêtre modale dans une fenêtre modale actuellement ouverte,
vous pouvez utiliser bootstrap-modal

DÉMO bootstrap-modal

suhailvs
la source

L'utilisation de ce bootstrap-modal déplace le contenu d'arrière-plan vers la droite.

Brian

@Brian - voir ici: stackoverflow.com/questions/46339063/…

lfkwtz

18

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>

Développer l'extrait

Elon Gomes Vieira
la source

1

échoue pour moi .. = (le modal fonctionne mais si le 1er modal est long qu'un scroll pour le 1er modal apparaît et quand vous ouvrez le 2ème modal et le fermez, le premier scroll modal ne fonctionne pas.

Vincent Dapiton

Merci beaucoup, c'était d'une grande aide :)

Daniel Muñoz

17

Vous pouvez réellement détecter la fermeture de l'ancien modal en appelant l' hidden.bs.modalévénement:

    $('.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

Giraldi
la source

15

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)

<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 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 ...

/* 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 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.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

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.

<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>

https://www.codeply.com/go/iSbjqubiyn

Zim
la source

Cela ne fonctionne pas dans Bootstrap 4. Lorsque vous fermez le 2ème modal, le 1er ne peut plus défiler.

Justin

@Justin - Je ne vois pas de scénario spécifique qui le démontre, et puisque le défilement sort du cadre de la question d'origine. Je vous suggère de rechercher ou de poser une autre question spécifique au problème de défilement.

Zim

nth-of-type n'a pas fonctionné pour moi parce qu'il ne regarde pas la classe. Je l'ai fait fonctionner avec:

.modal-backdrop.show + .modal.show {     z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show {     z-index: 1051 !important; }

webhead

14

Modals 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">&times;</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">&times;</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">&times;</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>

Développer l'extrait

RedDevil2015
la source

échoue pour moi .. = (le modal fonctionne mais si le 1er modal est long qu'un scroll pour le 1er modal apparaît et quand vous ouvrez le 2ème modal et le fermez, le premier scroll modal ne fonctionne pas.

Vincent Dapiton

L'exemple ci-dessus génère un modal à la place du premier modal pas au-dessus ni dans (le premier n'est plus visible).

JackTheKnife

Très bel effet.

Jorge B.

Comment utiliser votre solution dans l'interface utilisateur sémantique?

vahidsamimi

9

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.

$(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');
    };
});

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 relatedTargetest 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.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

Ren
la source

Ce n'est pas à 100% votre problème, mais le crochet illustré.bs.modal est plutôt pratique. La gestion de la classe body.modal-open semble boguée dans BS v.3.3.5, après avoir fermé un modal et en avoir ouvert un autre, il manque et donc l'arrière-plan défile au lieu du (deuxième) modal. Votre Hook peut corriger ce problème.

Manuel Arwed Schmidt

7

La documentation Twitter indique qu'un code personnalisé est requis ...

Cela fonctionne sans JavaScript supplémentaire, cependant, un 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 -->

Développer l'extrait

CrandellWS
la source

1

Voici un autre exemple avec le 2ème modal correctement formaté bootply.com/qRsvPSrcO5

Zim

1

@Skelly changer le z-index comme vous l'avez fait dans le css est une bonne idée ...z-index: 1080 !important;

CrandellWS

4

Si vous ouvrez le 2ème modal et cliquez à l'extérieur, il y aura un bug. (Chrome, dernier)

Martin Braun

peut-être que je me trompe, mais je crois que la documentation dit de ne pas mettre de modal dans un modal, ce n'est donc pas surprenant

CrandellWS

7

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 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; -

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 de profondeur, ce qui est plus que ce dont j'ai besoin.

smartbloke
la source

Cela ne fonctionne pas dans Bootstrap 4. Lorsque vous fermez le 2ème modal, le 1er ne peut plus défiler.

Justin

4

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.

Christian
la source

4

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">&times;</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">&times;</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">&times;</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>

Développer l'extrait

helloroy
la source

C'est génial, le seul problème qui reste est d'empêcher la réapparition de la barre de défilement lorsque le modal supérieur est fermé

HyperActive

Comment puis-je utiliser votre solution dans l'interface utilisateur sémantique?

vahidsamimi

2

J'ai également eu des problèmes avec mes modaux scrollables, alors j'ai fait quelque chose comme ceci:

  $('.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é afin que le second puisse apparaître. Aucun changement dans la structure Bootstrap.

teefars
la source

2

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 ...

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.

Dylan Hayes
la source

Merci beaucoup

2

Mon code fonctionne bien en utilisant le rejet de données.

<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>

user3675926
la source

1

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);

Abhishek
la source

1

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 souhaitez simplement basculer 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>

Carlo
la source

Cela ressemble plus à une réponse liée à l'UX, car j'en avais besoin pour afficher un message d'erreur concernant Modal # 1. Donc Modal # 2 avait le message d'erreur. Mais ça fait des siècles que je n'ai pas posé cette question et je fais ce genre de choses différemment maintenant.

AlexioVay

0

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)
  }
});

Rakesh Vadnal
la source

0

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.

$.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 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.

Adam
la source

-4

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

Alex Sh.
la source

Bootstrap: ouvrir un autre modal en modal

Réponses: