1. 首页
  2. 问答
  3. 锚定点击并不打开模式

锚定点击并不打开模式

2017-02-20 98 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

相关问题

 相关问题