2016-10-23 2 views
0

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#pwd").hide(); 
     $("#inlineRadio2").click(function(){ 
      $("#pwd").show(500); 
     }); 
    }); 

    </script> 
</head> 

<body> 
<div class="container"> 
<h2>Modal Example</h2> 
<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

<!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 

     <div class="modal-body"> 
     <form id="form_room" method="post" action="/create-room"> 
      <div class="form-group"> 
       <label for="room_name">Name</label> 
       <input type="text" id="room_name" name="room_name" placeholder="Room Name" /> 
      </div> 
      <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="pwd" value="private"> 
       </label> 

      </fieldset> 

     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div> 
</div> 

+0

У меня есть тест этот код, он работает так, как вы говорите, дайте мне знать, что точно не происходит от вы хотите? – Jigar7521

+0

@ Jigar7521 Привет, Jigar7521, я извиняюсь за свою ошибку раньше, код, который я опубликовал, сначала работает, но новый код не работает. –

ответ

0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#pwd").hide(); 
     $("#inlineRadio2").click(function(){ 
      $("#pwd").show(500); 
     }); 
    }); 

    </script> 
</head> 

<body> 
<div class="container"> 
<h2>Modal Example</h2> 
<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

<!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 

     <div class="modal-body"> 
     <form id="form_room" method="post" action="/create-room"> 
      <div class="form-group"> 
       <label for="room_name">Name</label> 
       <input type="text" id="room_name" name="room_name" placeholder="Room Name" /> 
      </div> 
      <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="pwd" value="private"> 
       </label> 

      </fieldset> 

     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div> 
</div> 

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