javascript - ejemplos - Bootstrap: abre otro modal en modal

modal jquery

Question

Entonces, estoy usando este código para abrir otra ventana modal en una ventana modal abierta actual:

<a onclick=/"$(''#login'').modal(''hide'');$(''#lost'').modal(''show'');/" href=''#''>Click</a>

Lo que ocurre es que, durante 500ms, la barra de desplazamiento se duplicará. Supongo que porque el modal actual todavía se está desvaneciendo. Sin embargo, se ve muy suave y tartamudo.

Agradecería cualquier sugerencia para resolver este problema.

Además, ¿la forma de compilar esto en un evento onclick no es profesional?

Estoy trabajando con la versión de arranque 3.0.

Edición: supongo que es necesario reducir el tiempo de desvanecimiento de un modal. ¿Cómo es esto posible?

Answer 1

Cierre el primer modal de Bootstrap y abra el nuevo modal dinámicamente.

$(''#Modal_One'').modal(''hide'');
setTimeout(function () {
  $(''#Modal_New'').modal({
    backdrop: ''dynamic'',
    keyboard: true
  });
}, 500);

Answer 2

En realidad, puede detectar cuándo se cierra el antiguo modal llamando al evento 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
            });

    });

Para más información: http://getbootstrap.com/javascript/#modals-events

Answer 3

Fui una especie de ruta diferente, decidí "anularlos". Tal vez alguien encuentre esto útil ...

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.

Answer 4

Los documentos de Twitter dicen que se requiere un código personalizado ...

Sin embargo, esto funciona sin JavaScript adicional, sería recomendable CSS personalizado ...

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

Answer 5

Mi código y mi trabajo son tan buenos utilizando los datos descartados

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

Answer 6

Mi solución no cierra el modal inferior, pero realmente se acumula encima. Mantiene el comportamiento de desplazamiento correctamente. Probado en Bootstrap 3. Para que los modales se acumulen como se espera, debe tenerlos ordenados en su marcado Html de menor a mayor.

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

ACTUALIZACIÓN: cuando tienes modales apilados, todos los fondos aparecen debajo del modal más bajo. Puede solucionar eso agregando el siguiente CSS:

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

Esto dará la apariencia de un fondo modal debajo del modal visible superior. De esta forma, pone gris debajo de sus modales inferiores.

Answer 7

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

Answer 8

Para abrir otra ventana modal en una ventana modal abierta actual,
puedes usar bootstrap-modal

DEMO de arranque-modal

Answer 9

Para alguien que usa 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>

Answer 10

Para bootstrap 4, para ampliar la respuesta de @ helloroy usé lo siguiente:

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

La ventaja de lo anterior es que no tendrá ningún efecto cuando solo haya un modal, solo se activará para los múltiplos. En segundo lugar, delega el manejo al cuerpo para garantizar que los modales futuros que no se generan actualmente todavía sean atendidos.

Actualizar

Pasar a una solución combinada de js / css mejora la apariencia: la animación de fundido continúa funcionando en el fondo;

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

combinado con el siguiente CSS:

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

Esto manejará modales anidados hasta 4 de profundidad, que es más de lo que necesito.

Answer 11

Prueba esto:

// Hide the login modal
$(''#login'').modal(''hide'');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $(''#lost'').modal(''show''); }, 500);

Este simple truco funciona para mí.

Answer 12

También tuve algunos problemas con mis modales desplazables, así que hice algo como esto:

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

Servirá para cualquier modalidad dentro de un modal que aparezca. Tenga en cuenta que el primero está cerrado, por lo que el segundo puede aparecer. Sin cambios en la estructura Bootstrap.

Answer 13

Trabajando en un proyecto que tiene muchos modales llamando a otros modales y algunos tipos de HTML que quizás no sepan iniciarlo cada vez para cada botón. Llegamos a una conclusión similar a @gmaggio, a regañadientes después de recorrer el camino más largo primero.

EDITAR: ahora admite modales llamados a través de javascript.

EDITAR: Abrir un modal de desplazamiento desde otro modal ahora funciona.

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

Simplemente coloque el botón de llamada modal como normalmente, y si se selecciona para estar dentro de un modal, se cerrará el actual primero antes de abrir el especificado en el target de datos. Tenga en cuenta que Bootstrap proporciona Tag relacionado.

También agregué lo siguiente para suavizar el desvanecimiento un poco: estoy seguro de que se puede hacer más.

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

Answer 14

prueba esto

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

Answer 15

data-dismiss hace que la fuerza de la ventana modal actual se cierre

data-toggle abre un nuevo modal con el contenido href dentro de él

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

o

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

háganos saber si funciona.

• También es posible que desee echar un vistazo a la Documentación modal

Answer 16

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