2016-07-09 7 views
0

以下は、モーダルダイアログがポップアップしないコードです。私はブートストラップ3.2.0を使用しています。jqueryも1.9.0を超えています。それ以上の情報と事前に感謝のことを知らせてください。#ブートストラップ3.2.0#モーダルダイアログ#jquery

<div class="modal fade" id = "login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"> 
      <span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModal">Login or Registeration </h4> 
     </div> 
     <div class="modal-body"> 
     <form action="#" method="POST"> 
      <div class="form-group"> 
      <input type="email" class="form-control" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
      <input type="password" class="form-control" placeholder="Password"> 
      </div> 
      <div class="form-group"> 
      <input type="submit" class="btn btn-primary" value="Login"> 
      <input type="submit" class="btn btn-primary" value="Register"> 
      </div> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <a href="#" class="btn btn-primary" data-dismiss="modal"> 
      Forgot Password?</a> 
     </div> 
     </div> 
    </div> 
    </div> 


<div class="jumbotron" id="home"> 
    <div class="container-fluid"> 
    <h1>The Design Store</h1> 
    <p>fdgdhfjgkhloj;jlkhhjgfdshjkl 
     sgdhfjgkhkjlrtyguuhjkoxcvbn 
     dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..</p> 
     <p>wefrgdthyjgukiosdfghjkgh 
     ssdfghjklertyuwertyuicvbnm, 
     sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg</p> 
     <p><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#login">My Account</a></p> 
    </div> 
</div> 
+0

私は、コード内でJavaScriptをブートストラップするすべての参照が表示されませんか? Modalダイアログが正しく動作するためには、ブートストラップのJavaScriptを読み込む必要があります。 – MojoJojo

答えて

1

マークアップまではすべて正しいです(下に表示するリンク)。 bootstrap.jsスクリプトの前にjquery.jsスクリプトが含まれていることを確認してください。

Working demo of your code

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"> 
        <span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModal">Login or Registeration </h4> 
      </div> 
      <div class="modal-body"> 
       <form action="#" method="POST"> 
        <div class="form-group"> 
         <input type="email" class="form-control" placeholder="Email"> 
        </div> 
        <div class="form-group"> 
         <input type="password" class="form-control" placeholder="Password"> 
        </div> 
        <div class="form-group"> 
         <input type="submit" class="btn btn-primary" value="Login"> 
         <input type="submit" class="btn btn-primary" value="Register"> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" class="btn btn-primary" data-dismiss="modal"> 
      Forgot Password?</a> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="jumbotron" id="home"> 
    <div class="container-fluid"> 
     <h1>The Design Store</h1> 
     <p>fdgdhfjgkhloj;jlkhhjgfdshjkl sgdhfjgkhkjlrtyguuhjkoxcvbn dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'.. 
     </p> 
     <p>wefrgdthyjgukiosdfghjkgh ssdfghjklertyuwertyuicvbnm, sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg 
     </p> 
     <p><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#login">My Account</a></p> 
    </div> 
</div> 
+0

公開されていることを確認するデモリンクを更新しました。 –

+0

ありがとうございました.. –

関連する問題