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>

的style.css：

#regModal .hidden{
    display: none;
}

modal.js：

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

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

Answer 1

我可以看到对现有代码的一些调整。

1）<div>未在.register-modal上正确关闭。

2）默认情况下.hidden类在bootstrap上有display:none !important属性。

现在修复上述调整。您的代码将正常运行。

这是工作fiddle

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

.register-modal{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary" type="button" href="modal.html" id="btn_port" data-toggle="modal" data-target="#regModal">Modal!</button>

<div class="modal fade" id="regModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <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">           
                <div class="login-modal">Login</div>
                <div  class="register-modal">register</div>
            </div>
            <div class="modal-footer">
            <a>click</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 2

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

注意我还将您的课程更改为login-div和register-div，因为对我来说，login-modal并没有传达实际的元素，我希望这是一个实际的模态

See this jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

单击取代Bootstrap模式的正文

2 个答案: