Bootstrap Modal Auto open Close

Question

function modalFunction(hideModal, showModal) {
            console.log(hideModal);
            console.log(showModal);
            $(hideModal).modal('hide').on('hidden.bs.modal',function () {
         $(showModal).modal('show');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<body>
<button class="btn btnp-default"><a data-toggle="modal" data-target="#login">Login</a></button>
<button class="btn btnp-default"><a data-toggle="modal" data-target="#signup">Signup</a></button>
 
  <div class="modal" id="login">
  <div class="modal-content">
    <p><a href="#" onclick="modalFunction('#login', '#signup')">Signup</a></p>
    </div>
  </div>
  
  <div class="modal" id="signup">
  <div class="modal-content">
    <p><a href="#" onclick="modalFunction('#signup', '#login')">Login</a></p>
    </div>
  </div>
</body>

Problem is I need too hide recent open modal and show another modal but below given code I stuck in loop where modal show and hide continuously. No way to prevent or close modal. As you can see in demo no way to close modal.

Here situation is

Modal Login have link -> Modal Signin
Modal Signup have link -> Modal Login

Isn't this already answered? http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new — Jay, Feb 14 '17 at 18:22
I already follow that answer. Run my snippet myModal is is stuck in loop — Object object, Feb 14 '17 at 18:25

max · Accepted Answer · 2019-05-15T17:34:02.247

You can do it differently (using custom HTML attributes):

$('[data-close]').click(function() {
  var closeModal = $(this).attr('data-close');
  var openModal = $(this).attr('data-open');
  $(closeModal).modal('hide');
  $(openModal).modal('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <button class="btn btn-default"><a data-toggle="modal" data-target="#login">Login</a></button>
  <button class="btn btn-default"><a data-toggle="modal" data-target="#signup">Signup</a></button>

  <div class="modal" id="login">
    <div class="modal-content">
      <p><a href="#" data-close="#login" data-open="#signup">Signup</a></p>
    </div>
  </div>

  <div class="modal" id="signup">
    <div class="modal-content">
      <p><a href="#" data-close="#signup" data-open="#login">Login</a></p>
    </div>
  </div>
</body>

score 0 · Answer 2 · answered Feb 15 '17 at 19:57

Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.

function showModal(typeid) {

  var message = $('#type_' + typeid);

  BootstrapDialog.show({
    title: typeid==1?"Login": "Sign Up.",
    message: $('#type_' + typeid),
    buttons: [{
      label: typeid!=1?"Login": "Sign Up.",
      action: function(dialog) {
        dialog.close();
        showModal(typeid==1?2:1);
      }
    }],
    onhide: function() {
      $('#hidden-div').append(message);
    }
  });
}


function showModal1() {

  var message = $('#common_div');

  BootstrapDialog.show({
    title: 'Login',
    message: $('#common_div'),
    onhide: function() {
      $('#hidden-div').append(message);
    }
  });
}

.setDiv {
  height: 200px;
  width: 200px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>



<button class="btn btn-primary" onclick="showModal(1)">login</button>
<button class="btn btn-primary" onclick="showModal(2)">Signup</button>
<br>
<br>Or you can do it in a better way
<br>
<br>

<button class="btn btn-primary" onclick="showModal1()">login</button>
<button class="btn btn-primary" onclick="showModal1()">Signup</button>

<div id="hidden-div" style="display : none">
  <!-- Login div -->
  <div id="type_1" class="setDiv">
    This is login div.
  </div>

  <!-- Login div -->
  <div id="type_2" class="setDiv">
    This is signup div.
  </div>

  <div id="common_div" class="setDiv" data-title="Sign Up">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Signup</a>
      </li>
      <li><a data-toggle="tab" href="#menu1">Login</a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <div id="type_1" class="setDiv" data-title="Login">
          This is login div.
        </div>
      </div>
      <div id="menu1" class="tab-pane fade">
        <div id="type_2" class="setDiv" data-title="Login">
          This is login div.
        </div>
      </div>
    </div>
  </div>

</div>

Bootstrap Modal Auto open Close

2 Answers2