Javascript 引导模式未弹出_Javascript_Jquery_Css_Twitter Bootstrap

Javascript 引导模式未弹出

javascript jquery css twitter-bootstrap

Javascript 引导模式未弹出,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我对bootstrap非常陌生，我正在尝试使用Modals添加一个弹出窗口。我添加了代码和脚本，但是当你点击按钮时，它不会弹出。我可以判断出有什么事情正在发生，因为背景会稍微淡出，但不会出现弹出窗口。所以我需要一点帮助，弄清楚它为什么没有出现 My JavaScript links: <script src="js/jquery-1.10.2.js" type="text/javascript"></script> <script src="js/boots

我对bootstrap非常陌生，我正在尝试使用Modals添加一个弹出窗口。我添加了代码和脚本，但是当你点击按钮时，它不会弹出。我可以判断出有什么事情正在发生，因为背景会稍微淡出，但不会出现弹出窗口。所以我需要一点帮助，弄清楚它为什么没有出现

My JavaScript links: 
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js" type="text/javascript"></script>

Code for Modals: 
<div class="modal hide fade" id="myModal">

           <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

我的JavaScript链接：
情态动词代码：

使用CDN完成示例。以便您可以从Url下载最新版本

<html>
    <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">


<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

    <body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    </body>
</html>


启动演示模式
&时代；
情态标题
...
接近
保存更改

对于仅使用JavaScript和引导的modal，我通常做的是在按钮上有一个onClick事件，该事件执行一个显示模态的JavaScript方法

在HTML中：

<button onclick="myFunction()">Click me</button>
<script>
    function myFunction(){
        $('#myModal').modal('show') 
    }
</script>

点击我
函数myFunction（）{
$（'#myModal'）.modal（'show'））
}

只需将函数名

myFunction

更改为所需名称，并将

myModal

更改为模态的id即可

这是引导文档，模态文件位于其中，供将来参考

这是v2.X与v3.X的兼容性问题

Bootstrap 3.0新类和元素

模态标记已更改。模态页眉

。模态正文

。模态页脚

现在包装在

中。模态内容

和

中。模态对话框

模式迁移

如何从2.x模式转换为3.0模式：

从
```
.modal
```
中删除
```
.hide
```
（现在默认情况下它是隐藏的）
将
```
.modal页眉
```
.modal正文.modal页脚包裹在
```
内。modal内容
```
将
```
模式内容
```
包装在
```
模式对话框
```

事件具有名称空间。例如，要处理模式

'show'

事件，请使用

'show.bs.modal'

引导3模式示例：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>


×
情态标题
对话框/模式的内容位于此处。

您有什么版本的引导？我已经检查了2.3.2，效果很好。虽然它在3.2上不起作用-我如何才能让它在3.2上起作用@phillip100是一个HTML示例，它会弹出，但它不允许我点击任何东西来关闭它或退出弹出窗口。你认为这与它在页面上的位置有关吗@Phillip100看一看我的答案，它会弹出，但现在它不允许我关闭它或单击弹出窗口中的任何地方。我现在迷路了，我使用了你从该链接中给我的相同代码。它正在弹出，但我不能点击它来关闭更新的答案与模态的例子。你应该在关闭按钮中有一个

data dismission=“modal”

属性我想问的是，你认为这与它在页面上的位置有关吗，因为它甚至不允许我单击它可能在的任何位置。尝试在打开

body

tag后将其放置。“打开模式”按钮可以是任何地方。还有一个问题，您知道在单击按钮时如何淡入背景吗？