Как скрыть элемент в пределах модального fade

Я хочу скрыть текст «Введите пароль» и пустое поле сначала и показать, когда я нажимаю радио «Частный». Мой код следующий. Однако это не сработает, поскольку, когда я нажимаю «создать новую комнату», «Ввод пароля» уже отображается в модальном контенте, и ничего не произошло, когда я нажимаю «Частный». Как я могу исправить свой код? Спасибо огромное!Как скрыть элемент в пределах модального fade

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Create Role</title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <script> 
      $(document).ready(function(){ 
       $("#pwd, #pwdblank").hide(); 
       $("#inlineRadio2").click(function(){ 
        $("#pwd, #pwdblank").show(500); 
       }); 
      }); 

     </script> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 

      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/index">Rooms</a></li> 
       <li><a data-toggle="modal" data-target="#createRoomModal">Create New Room</a></li> 

      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div class="container"> 
     <div class="row"> 

     </div> 
    </div> 

    <div id="createRoomModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Create a new room</h4> 
       </div> 
       <div class="modal-body"> 
        <form id="form_room" method="post" action="/create-room"> 

         <fieldset class="form-group"> 
          <label class="form-check-inline"> 
           <input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public 
          </label> 
          <label class="form-check-inline"> 
           <input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private 
          </label> 
          <label class="form-check-inline"> 
           <p id="pwd">Enter password</p> 
           <input class="form-check-input" type="text" name="text" id="pwdblank"> 
          </label> 
         </fieldset> 


        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="submit" class="btn btn-success" form="form_room">Create</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="script-index.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body>

источник

2016-10-23 Xiufen Xu

Что вы подразумеваете под пустым первым ??? –

Привет, я имею в виду пустую коробку. Я хочу скрыть как «Enter Password», так и пустое поле, которое используется для ввода пароля, а затем отображать эти два элемента, когда я нажимаю private. –

Здравствуйте смотрите ниже One Hope вы ищете это ...

$(document).ready(function(){ 
 
       $("#pwd, #pwdblank").hide(); 
 
       $("#inlineRadio2").click(function(){ 
 
        $("#pwd, #pwdblank").show(500); 
 
       }); 
 
\t \t \t  
 
\t \t \t  $("#inlineRadio1").click(function(){ 
 
       $("#pwd, #pwdblank").hide(500); 
 
       }); 
 
\t \t \t  
 
\t \t \t  
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="script-index.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>Create Role</title> 
 
     <!-- Latest compiled and minified CSS -->  
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 

 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="/index">Rooms</a></li> 
 
       <li><a data-toggle="modal" data-target="#createRoomModal">Create New Room</a></li> 
 

 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <div class="container"> 
 
     <div class="row"> 
 

 
     </div> 
 
    </div> 
 

 
    <div id="createRoomModal" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
        <h4 class="modal-title">Create a new room</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <form id="form_room" method="post" action="/create-room"> 
 

 
         <fieldset class="form-group"> 
 
          <label class="form-check-inline"> 
 
           <input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public 
 
          </label> 
 
          <label class="form-check-inline"> 
 
           <input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private 
 
          </label> 
 
          <label class="form-check-inline"> 
 
           <p id="pwd">Enter password</p> 
 
           <input class="form-check-input" type="text" name="text" id="pwdblank"> 
 
          </label> 
 
         </fieldset> 
 

 

 
        </form> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="submit" class="btn btn-success" form="form_room">Create</button> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-10-23 05:12:15

Привет, Asifuzzaman, ваш код работает, когда я запускаю фрагмент кода, но я не знаю, почему вы отделяете код и где я должен поместить первый блок вашего кода? Спасибо! –

напишите код jquery внутри тега

Используйте show.bs.modal событие следующим образом

$('#myModal').on('show.bs.modal', function (e) { 
    // do something... 
    // this code runs just before the modal is shown 
    // hide your field here 
});

Используйте ссылку на документацию here

источник

2016-10-23 05:18:17

Смежные вопросы

Как скрыть элемент в пределах модального fade

ответ

Смежные вопросы