黑马程序员UI教程：Bootstrap弹出框

黑马程序员UI教程：Bootstrap弹出框

使用过JQuery UI的园友们应该知道，它里面有一个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap里面也内置了弹出框组件。打开bootstrap 文档/components/可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是说，只要我们引入了bootstrap的文件，就可以直接使用它的dialog组件，是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说，直接看来它如何使用吧。

1、c shtml界面代码

aria-labelledby="myModalLabel">

aria-label="Close">×

新增

部门名称

id="txt_departmentname" placeholder="部门名称">

上级部门

id="txt_parentdepartment" placeholder="上级部门">

部门级别

id="txt_departmentlevel" placeholder="部门级别">

描述

data-dismiss="modal">

aria-hidden="true">关闭

data-dismiss="modal">保存

最外面的div定义了dialog的隐藏。我们重点来看看第二层的div

这个div定义了dialog，对应的class有三种尺寸的弹出框，如下：

第一种表示默认类型的弹出框；第二种表示增大的弹出框；第三种表示满屏的弹出框。role="document"表示弹出框的对象的当前的document。

2、js里面将dialog show出来。

默认情况下，我们的弹出框是隐藏的，只有在用户点击某个操作的时候才会show出来。来看看js里面是如何处理的吧：

//注册新增按钮的事件

$("#btn_add").click(function () {

$("#myModalLabel").text("新增");

$('#myModal').modal();

});

对，你没有看错，只需要这一句就能show出这个dialog.

$('#myModal').modal();

3、效果展示

新增效果