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>

问题是我需要隐藏最近的开放模态并显示另一个模态但是在给定的代码下面我卡在循环中，其中模态显示并持续隐藏。无法阻止或关闭模态。正如你在demo中看到的那样无法关闭模态。

这里的情况是

模态登录有链接 - ＆gt;模态登录
模态注册有链接 - ＆gt;模态登录

Answer 1

您可以采用不同的方式（使用自定义HTML属性）：

values

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

Answer 2

以下是现代的做法。您可以参考this link获取有关动态创建模态的方式的更多详细信息。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap Modal自动打开关闭

2 个答案: