1. 首頁
  2. 問答
  3. 錨定點擊並不打開模式

錨定點擊並不打開模式

2017-02-20 61 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：我有我的相關文件。即。 Bootstrap和Jquery。

來源

2017-02-20 Suraj

+2

檢查1：'jQuery的。（min。）js'＆'bootstrap。（min。）js'都按此順序加載。檢查2：你能在小提琴中重現問題嗎？檢查3：如果您不能在頁面中綁定點擊的其他腳本，並且取消事件或在返回到bootstrap.js事件之前返回false，那麼問題就出現了。 –

+1

你檢查過控制檯嗎？ – rahulsm

+0

我發現你的問題，你忘了在你的頁面中引用Jquery Js。結帳你的控制檯 –

回答

1

確保你打電話bootstrap.min.js後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

您的jQuery之前加載引導。

<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

一切工作正常。試試這個：

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

Working Fiddle

我想你忘了添加JS和CSS。

來源

2017-02-20 11:37:33

0

首先，您需要調用的jQuery（bootstrap.min.js前）：

<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。

<!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

並添加三個文件，如上所述。 – KiranPurbey

+0

*「使用此代碼」*不解釋任何東西 – charlietfl

+0

代碼是好的。只有問題可能是你忘了添加js和css文件。所以使用本地保存的js和css文件。 – KiranPurbey

0

你必須包括bootstrap.js之前的jQuery文件。這裏是你的小提琴更新：jsfiddle.net/dssoft32/ehmepvya/2/

Bootstrap框架依賴於jquery。所以你必須首先包含jquery。導入文件的順序在Java腳本中扮演着重要的角色。

來源

2017-02-20 11:39:24

0

嘗試使用此

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

或引用這個.. https://getbootstrap.com/javascript/#modals

另外一個東西，記住，你需要加載的jQuery爲，所以要確保您加載正確。

來源

2017-02-20 11:39:40

0

你確定你已經包含bootstrap和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

相關問題

 相關問題