Bootstrap 模态自动打开关闭答案

【问题标题】：Bootstrap Modal Auto open CloseBootstrap 模态自动打开关闭
【发布时间】：2019-05-16 01:34:02
【问题描述】：

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>

问题是我需要隐藏最近打开的模态并显示另一个模态，但在给出的代码下面我陷入了模态连续显示和隐藏的循环。没有办法阻止或关闭模态。正如您在演示中看到的那样，无法关闭模式。

这里的情况

模态登录有链接 -> 模态登录
模态注册有链接 -> 模态登录

【问题讨论】：

这不是已经回答了吗？ stackoverflow.com/questions/18253972/…
我已经按照这个答案了。运行我的 sn-p myModal 是卡在循环中

标签： jquery twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

你可以做不同的事情（使用自定义 HTML 属性）：

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

【讨论】：

【解决方案2】：

下面给出的是现代的做法。动态创建modal的方式可以参考this link。

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>

【讨论】：