实现Twitter Bootstrap模态

前端之家收集整理的这篇文章主要介绍了实现Twitter Bootstrap模态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我很新的编码,所以请原谅我的缺乏经验.

我目前正在制作一个网站,想要有按钮模式.我似乎无法让它工作,并已经尝试了至少几个小时.这是我在我的html文件中写的,这是从Twitter Bootstrap网站获取的:

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

<div class="modal" 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>

我在这里遗漏了什么吗?我需要添加其他东西吗?引导站点说“通过javascript调用模态”,但是我不知道把$(‘#myModal’).modal(options)放在哪里.我将它放在.html和.js文件中,但都没有尝试.

.html文件已经有

<script src="js/bootstrap-modal.js"></script>

以及所有其他插件,但这似乎没有做任何事情.还值得注意的是,我在我的电脑上在本地工作.

我相信这是一个非常容易的问题,但任何帮助将不胜感激.

编辑:我设法让它工作.看起来像我的问题是我正在采购bootstrap-modal.js,当我真的只有bootstrap.js.我用代码创建了一个名为boostrap-modal.js的新文件,它工作正常.

但是,我仍然无法在转型中褪色.我使用了bootstrap-transition.js文件,但仍然似乎无法让它失效.额外的帮助将不胜感激.

解决方法

*更新了小提琴的引导样式表路径,自从我写了这个答案以来,它已经改变了.

您需要在引导程序modal.js脚本文件之前添加jQuery脚本才能使插件工作,这里是直接从Google搜索引擎中直接提供的脚本,您可以在页面中自由添加,只需确保将其包含在任何js之前可能有:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

如果您希望在页面加载时显示脚本,则只需要调用脚本,否则您只需要在您已经拥有的模态按钮中具有正确的data- *属性和参考参考:

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

您可以在< body>结尾处包含所有脚本.标签用于加快内容加载速度,同样的方式,twitters bootstrap演示页面有它.

这是模式页面的演示:

http://jsfiddle.net/3v2zg/626/

原文链接:https://www.f2er.com/bootstrap/234078.html

猜你在找的Bootstrap相关文章