Bootstrap模态框Modals详解

Bootstrap是Twitter推出的一个开发工具包,包含了一些比较常用的CSS,JavaScript代码。使用Bootstrap可以加快前端开发的速度。很多网站,包括新浪sae都是使用了Bootstrap。

本文不是介绍Bootstrap,而是介绍使用Bootstrap中的一个JS特效——Modals。

注意:Bootstrap的JavaScript效果是需要搭配JQuery使用的!

Modals是什么?

 

下面建立一个Modal示例,除了引入JS文件外,无需写一行JS代码。

首先需要引用CSS文件,引用CSS文件的语句放在网页head部分

<link href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css" rel="stylesheet" type="text/css">

然后引用JS文件,下面的JS代码建议放到网页</body>之前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js" type="text/javascript"></script>

接着在页面中建立一个div,代码如下:

<div id="my_modal" class="modal hide fade">
	<div class="modal-header"><a class="close" title="关闭小窗口">&times;</a><h3>Modal标题</h3></div>
	<div class="modal-body">
		<p>这个div内放内容</p>
	</div>
	<div class="modal-footer">
		<a class="btn primary">按钮一个</a>
	</div>
</div>

上面的id为my_modal的DIV就是用来显示的窗口(Modal),默认是不显示的(因为class=”hide”)。

 

最后在网页中添加一个标签,这里我使用a标签,点击这个标签就会显示Modal,代码如下:

<a class="btn"  data-controls-modal="my_modal" data-backdrop="true" data-keyboard="false">按钮一个</a>

标签属性讲解:

class="btn" ,显示出来是一个按钮,'btn'类选择器的定义在bootstrap.min.css

data-controls-modal – 要显示的Modal的ID

data-controls-modal="my_modal"中的my_modal就是我们上面我们定义的容器DIV

data-backdrop – 背景选项

data-backdrop="true"	这个属性值表示显示黑色的页面背景且点击黑色背景会隐蔽modal
data-backdrop="false"	false,不显示黑色的背景
data-backdrop="static"	static,会显示黑色背景但点击黑色背景不会隐蔽modal

data-keyboard 键盘选项

data-keyboard="false" 值可以是true或false,按下键盘ESC键时是否关闭(隐蔽)modal

这样,无需写一行JS代码就可以建立一个Modal示例了。

打赏此文

如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!打赏记录
支付宝
微信
承诺:凡打赏捐助的朋友,留言备注自己的邮箱,在打赏捐助时间点的6个月内,本站会每周邮件推送原创专业技术博文,供大家学习和参考!

留下评论

All fields marked (*) are required