javascript - 通过单击替换 Bootstrap 模态的主体

Question

我想通过单击链接来替换 Bootstrap 模态的主体。这是我的代码:

index.php:

<div id="regModal" class = "modal fade" role = "dialog">
    <div class ="modal-content">
        <div class ="modal-header">...</div>
        <div class="modal-body">
            <div class = "row">
                <div class="col-xs-12 login-modal">...</div>
                <div  class="col-xs-12 register-modal hidden">...<div>
            </div>
        </div>
        <div class ="modal-footer"><a>click</a></div>
    </div>
</div>

样式.css:

#regModal .hidden{
    display: none;
}

modal.js:

$("#regModal a").click(function(evt) {
    $("#regModal .login-modal").fadeOut();
    $("#regModal .hidden").fadeIn();        
});

它实际上隐藏了整个模态。如何将 login-modal 替换为 register-modal？

Answer 1

不要在 DOM 操作中使用 .hidden 类。 Bootstrap 经常使用这个类，它的 css 使用 display:none !important 并且它似乎弄乱了你的选择器

请注意，我还将您的类更改为 login-div 和 register-div 因为对我来说，login-modal 没有传达元素实际上是什么，我希望它是一个实际的模态

See this jsFiddle

$("#regModal").modal('show');
$("#regModal a").click(function(evt) {
  $("#regModal .login-div").fadeOut();
  $("#regModal .register-div").fadeIn();
});

#regModal .register-div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="regModal" class="modal fade" role="dialog">
  <div class="modal-content">
    <div class="modal-header">modal-header</div>
    <div class="modal-body">
      <div class="row">
        <div class="col-xs-12 login-div">login-div</div>
        <div class="col-xs-12 register-div "><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""></div>
      </div>
    </div>
    <div class="modal-footer"><a>click</a></div>
  </div>
</div>