Заменить тело Bootstrap modal, нажав

Question

Я хочу заменить тело Bootstrap modal, нажав на ссылку. Вот мой код:

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

Это переменный ток втайне скрыть весь модальный. как заменить login-мода с регистрационный способ?

Answer 1

Dont использовать класс .hidden в вашей манипуляции DOM. 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>

Answer 2

Я могу видеть некоторые настройки вашего существующего кода.

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>