ブートストラップモーダルが表示されない

Question

<div class="continer"> 
        <div class="row"> 
         <div class="col-md-2"> 
          <button class="btn btn-primary" target="#loginmodal" data-toggle="modal"></button> 
          <div class="modal" id="loginmodal" tabindex="-1"> 
           <div class="modal-dialog"> 
            <div class="modal-content"> 
             <div class="modal-header"> 
              <button class="close" data-dismiss="modal">&times;</button> 
             </div> 
             <div class="modal-body"> 
              <form> 
               <div class="form-group"> 
                <label for="Username">Username</label> 
                <input type="text" name="text" class="form-control"> 
               </div> 
               <div class="form-group"> 
                <label for="Password">Password</label> 
                <input type="Password" name="text" class="form-control"> 
               </div> 
              </form> 
             </div> 
             <div class="modal-footer"> 
              <button class="btn btn-primary" data-dismiss="modal">Close</button> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

私はlogin modalのためのboostrapコードを書いていますが、私はmysideからすべてを試しましたが、理由は分かりません。

私は、以下のリンクを追加した

Answer 1

target属性を表示するモーダルをトリガーボタンをdata-targetする必要があります。このボタンにtype="button"を追加すると、

<div class="continer"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <button type="button" class="btn btn-primary" data-target="#loginmodal" data-toggle="modal">Launch Modal</button> 
      <div class="modal" id="loginmodal" tabindex="-1" role="dialog"> 
       <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button class="close" data-dismiss="modal">&times;</button> 
         </div> 
         <div class="modal-body"> 
          <form> 
           <div class="form-group"> 
            <label for="Username">Username</label> 
            <input type="text" name="text" class="form-control"> 
           </div> 
           <div class="form-group"> 
            <label for="Password">Password</label> 
            <input type="Password" name="text" class="form-control"> 
           </div> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button class="btn btn-primary" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>