点击链接，替换Bootstrap模态的身体。

我想通过单击链接替换Bootstrap模态的身体。这里是我的代码：点击链接，替换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();   
});

这是AC实际上隐藏了整个模态。如何更换登录模态与注册模态？

来源

2016-02-27 AFN

您的*实际*链接是否有类似'href =“＃regModal”data-toggle =“modal”'的机会？我问，因为你的js代码工作正常，请参阅[这jsFiddle]（https://jsfiddle.net/DelightedDoD/3n2qfmaL/） – DelightedD0D

@ DelightedD0D，我没有看到寄存器模式“淡入”在小提琴 –

对不起，你的陈述*它实际上隐藏了整个** modal **。如何用注册模式替换登录模式？*由于命名不当而导致误导。 – DelightedD0D

不要使用类.hidden在DOM操作。引导使用该类了很多，它的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>

来源

2016-02-27 07:06:37 DelightedD0D

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

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

2）默认情况下，.hidden类在引导时具有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>

来源

2016-02-27 07:05:11 Sathish

点击链接，替换Bootstrap模态的身体。

回答

相关问题