1. ホーム
  2. 質問と答え
  3. アンカークリックでモーダルが開かない

アンカークリックでモーダルが開かない

2017-02-20 7 views
-6

ここに私とアンカータグがあります。アンカークリックでモーダルが開かない

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

私のモーダルは

<!-- Modal --> 
<div class="modal fade" id="modalTC" 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"> 
     <p>Some text in the modal.</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    </div> 
</div>

Fiddle以下のように見えます。

何が問題なのかよく分かりません。 PS：関連するファイルがあります。すなわち、ブートストラップとJquery。

出典

2017-02-20 Suraj

+2

チェック1作品： 'jqueryのを。（min。）js'と 'bootstrap。（min。）js'の両方がこの順序でロードされます。チェック2：問題をフィドルで再現できますか？チェック3：あなたのページ内の他のスクリプトで問題が発生していない場合は、クリックしてバインドし、イベントをキャンセルするか、falseを返してからbootstrap.jsイベントを取得します。 –

+1

コンソールをチェックしましたか？ – rahulsm

+0

あなたの問題を発見しました。ページ内のJquery Jを参照するのを忘れました。あなたのコンソールをチェックアウト –

答えて

1

あなたはあなたがjQueryの前に、ブートストラップ・ロードjquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> 
 

 
<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="modalTC" 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"> 
 
     <p>Some text in the modal.</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-02-20 11:36:22

0

後bootstrap.min.jsを呼び出していることを確認してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="modalTC" 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"> 
 
     <p>Some text in the modal.</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-02-20 11:36:24 Justinas

1

すべてが正常に動作しています。私はあなたがJSとCSSを追加するのを忘れ考える

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

Working Fiddle

：これを試してみてください。

あなたは（bootstrap.min.js前に）最初のjQueryを呼び出す必要があり

出典

2017-02-20 11:37:33

0

：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Working fiddle

はそれがお役に立てば幸いです。

出典

2017-02-20 11:38:02 JazZ

0

このコードを使用して、bootstrap.min.css、jquery.min.js、bootstrap.min.jsという3つのファイルをローカルに追加します。あなたはbootstrap.js前にjqueryのファイルを含める必要が

<!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="css/bootstrap.min.css"> 
     <script src="js/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
     <h2>Modal Example</h2> 
     <!-- Trigger the modal with a button --> 
     <a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a> 
    <!-- Modal --> 
    <div class="modal fade" id="modalTC" 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"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    </body> 
</html>

出典

2017-02-20 11:39:09 KiranPurbey

+0

上記の3つのファイルを追加してください。 – KiranPurbey

+0

* "このコードを使用する" *何も説明していない – charlietfl

+0

コードは問題ありません。あなたはjsとcssファイルを追加することを忘れてしまうかもしれません.JSとCSSファイルをローカルに保存してください。 – KiranPurbey

0

。ここであなたは更新されたフィドルです：jsfiddle.net/dssoft32/ehmepvya/2/

ブートストラップフレームワークはjqueryに依存しています。したがって、まずjqueryをインクルードする必要があります。ファイルをインポートする順序は、Javaスクリプトで大きな役割を果たします。

出典

2017-02-20 11:39:24

0

は..あなたはそのためのjQueryをロードする必要が心に留めておくべきhttps://getbootstrap.com/javascript/#modals

別の物事はあなたがそれを正しくロードされていることを確認してください。この

<a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </a>

ORこれを参照してくださいを使用してみてください。

出典

2017-02-20 11:39:40

0

ブートストラップとjqueryを含めてもよろしいですか？私はちょうど

<script 
src="https://code.jquery.com/jquery-3.1.1.min.js" 
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
crossorigin="anonymous"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

を追加しましたし、それが正常に

出典

2017-02-20 11:43:24

関連する問題

 関連する問題