Bootstrap Modal-静态框使用及遇到的问题
来源:互联网 发布:机械模拟仿真软件 编辑:程序博客网 时间:2024/06/06 18:58
Bootstrap Modals 是使用的定制的JQuery 插件创建的,下面是使用方法:
1.1:导入对应的js。css,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的前提是jQuery,所以我们要导入jquery.min.js
对应导入代码:
<!--导入样式--><link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/><link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" /><link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/><link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/><!--导入bootstrap.js包--><script src="jquery/jquery-3.1.1.min.js"></script><script src="Bootstrap/js/bootstrap.min.js"></script>
1.2:具体用法有2种1、通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
demo如下:
<h2>创建模态框(Modal)</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</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-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4> </div> <div class="modal-body">在这里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>
2、通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)demo:
$(function () { $("#btn_edit").click(function () { $("#myModal").modal("show"); console.log("打开静态框"); });})
遇到的问题:
用js的方式调用,打开modal静态框的时候一直包下面的错误,
Infographic.js:176 Uncaught TypeError: $(...).modal is not a function
at HTMLButtonElement.<anonymous> (Infographic.js:176)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.r.handle (jquery.min.js:3)
解决方案:上面的问题主要是包的引入问题,要确保上面的包多已经引入,我就是在引入jquery包时,引入了2个重复的包,去掉其中的一个,问题解决了。
阅读全文
1 0
- Bootstrap Modal-静态框使用及遇到的问题
- Bootstrap Modal 关闭时引起的问题
- BootStrap的modal模态框的使用
- 在BootStrap的modal中使用Select2
- bootstrap中modal的简单使用
- bootstrap modal框不能draggable问题
- bootstrap—modal使用
- BootStrap modal模态弹窗使用
- 使用Bootstrap时遇到的问题
- 使用angularjs ui-bootstrap遇到的问题
- 使用bower安装bootstrap遇到的问题
- 使用BootStrap Inputfile 遇到的问题
- bootstrap modal 在IOS9中不能弹出的问题 IOS 9 bootstrap modal ios 9 noticework
- bootstrap 动态添加modal,隐藏后背景仍然残留的问题 bootstrap-modal-backdrop-remaining
- bootstrap modal弹出框的垂直居中
- 关于bootstrap的modal
- bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
- bootstrap modal弹出框
- 爬取12306站点信息
- DBV-00201: Block, DBA 21065723, marked corrupt for invalid redo application解决
- amoy url
- 数组指针和指针数组的区别
- Spring思维导图,让Spring不再难懂(ioc篇)
- Bootstrap Modal-静态框使用及遇到的问题
- 求一组数中的最大最小数以及源码分析
- [DUBBO] Unexpected error occur at send statistic, cause: Forbid consumer 192.168.3.151 access servic
- linux find
- ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置
- Brick Wall问题及解法
- python 汉字转拼音 实例
- QT 如何在其他类中修改UI控件的属性?
- HDU 4998 Rotate(计算几何/绕弧度旋转/模板的巧用)