Bootstrap库之Modals

Bootstrap库之Modals。

Bootstrap是Twitter推出的一个开发工具包，包含了一些比较常用的CSS，JavaScript代码。使用Bootstrap可以加快前端开发的速度。

标签属性讲解:

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示例了。

使Modals窗体可以拖动

引入jquery ui的draggable组件，然后：

$("#myModal").draggable({
    handle: ".modal-header"
});