Problem with Bootstrap and windows MODAL

Question

Problem with Bootstrap and windows MODAL

Navigation

#1 by (1 votes)

0

Good afternoon, I'm using bootstrap 3 and I use modal windows, the problem is that inside a modal window by clicking on a button I open another modal window, and when I hit the close button of the second open window, they close both sales simultaneously. Can you solve this, so that they close independently ?. I imagine that the problem is in the line of code

<button type="button" class="btn btn-primary btn-xs" data-dismiss="modal">Cerrar</button>

which is repeated for both windows. I hope someone in the key. Thanks.

bootstrap modal

asked by Ricardo Pastuszek 05.07.2017 в 22:03

source

1 answer

I check CheckBox and TextView together, but it does not work correctly How to pass parameters to an event that you do not receive?

score 1 · Accepted Answer

Bootstrap makes clear in its documentation that the superimposed manners, as this requires custom code.

What you can do is hide the latter as follows

$('#modal2-Cerrar').on('click', function(evt){
  evt.preventDefault()
  $('#Modal2').modal('hide');
  $('#Modal1').modal('show');
});

and your button would be as follows in the second modal:

<button type="button" id="modal2-Cerrar" class="btn btn-primary btn-xs">Cerrar</button>

and on the top button would be the same. Staying this way:

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

and in the function, the selector would be in this way $('#modal2-Cerrar, .close').on(...)

Update

This example is using two modalities with different id in which the bootstrap version 3.3.7 is used, it works correctly with the added manners, but the backdrop does not cover the first modal (to do this should be played with jquery and css)

<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.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal1">
  Modal doble Default
</button>

<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal2">Lanzar segundo modal</button>
        
      </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>

<!-- Segundo modal  -->
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Aqui estoy en un segundo modal
      </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>

This second example is using the functions that you provide and removing attributes that come by default, the same thing happens with backdrop

$('#Modal2-cerrar, .close2').on('click', function() {
  $('#Modal2').modal('hide');
  $('#Modal1').modal('show');
});
$('#Modal1-cerrar, .close1').on('click', function() {
  $('#Modal1').modal('hide');
});

<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.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal1">
  Modal doble Ajustado
</button>

<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close close1"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal2">Lanzar segundo modal</button>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="Modal1-cerrar">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Segundo modal  -->
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close close2"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Aqui estoy en un segundo modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id='Modal2-cerrar'>Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>