在bootstrap中 ， 可以使用modal组件创建一个带关闭按钮的窗口 。 下面小编举例讲解如何使用bootstrap弹出带关闭按钮的窗口 。
文章插图
需要这些哦
html+bootstrap
代码编纂器：z studio 10.0
方式/
1新建一个html文件 ， 定名为test.html ， 用于讲解若何利用bootstrap弹出带封闭按钮的窗口 。
文章插图
2在test.html文件中 ， 引入jquery.min.js ， bootstrap.min.js和bootstrap.min.css文件 。
文章插图
3在test.html文件中 ， 利用button标签建立一个按钮 ， 并设置其data-toggle属性为modal ， 用于点击弹出窗口 。
文章插图
4在test.html文件中 ， 利用div建立一个modal窗口 ， 在类名为modal-body的div中编写窗口内容 。
文章插图
5在test.html文件中 ， 利用button标签建立一个封闭按钮 ， 并将data-dismiss属性设置为modal ， 实现点击封闭窗口的功能 。
文章插图
6在浏览器打开test.html文件 ， 查看成果 。
文章插图
总结：1【如何使用bootstrap弹出带关闭按钮的窗口】1、引入jquery.min.js ， bootstrap.min.js和bootstrap.min.css文件 。 2、利用button标签建立一个按钮 ， 并设置其data-toggle属性为modal ， 用于点击弹出窗口 。 3、利用div建立一个modal窗口 ， 在类名为modal-body的div中编写窗口内容 。 4、利用button标签建立一个封闭按钮 ， 并将data-dismiss属性设置为modal ， 实现点击封闭窗口的功能 。
以上内容就是如何使用bootstrap弹出带关闭按钮的窗口的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- wps演示中如何制作环形封面
- wps演示中如何制作折线型目录
- wps演示中如何制作梯形标题样式
- wps演示中如何绘制收音机图标
- wps演示中如何绘制排气扇图标
- wps演示中如何绘制罗盘图标
- php如何检查数组中是否存在指定的索引
- switch主机画面如何连接投屏到电视
- 百度经验账号怎么绑定淘宝联盟——如何获取PID
- Keep如何设置每日规律运动提醒