Bootstrap技术: 模式对话框的使用

一、概述

说到模式对话框，大家肯定都会想到windows下GUI程序，在gui程序中，有大量的对话框。在web程序中，随着页面交互式功能的增多，有很多场景下也会用到对话框。在html原生的支持下，有alert, confirm,propmt 三种基本的模式对话框。简单好用，但它们的问题是样式比较难看，与一些优秀的页面框架的样式难以一致，用户体验较差。

基于web页面的本质，如果自己实现对话框，实现的对话框本质上就是一个web元素快（如div），只是将其显示成一个对话框的样子（有边框，有标题栏、关闭按钮等），可以显示，可以关闭。

利用html元素包装的对话框，与html原生的几个对话框一个非常本质的差别是，html原生的对话框是堵塞型的，是真正的对话框，而采用html元素包装的对话框是无法做到包装的。比如：

function fun(){

　　.........

　　var re = confirm("真的要删除吗？");

　　if(re){

　　　　......

　　}

　　else{

　　　　......

　　}

上面的代码中, confirm调用会弹出一个确认对话框，这时这个对话框在被关闭前，会堵塞下面代码（if语句块）的执行，直到该对话框被关闭，返回结果后，下面的代码才会被执行。

但是如果是自己来采用html元素封装对话框，是无法实现这种堵塞的，需要利用回调函数来实现。也就是说，我们无法自己封装一个类似的confirm方法，让一个堵塞的对话框。这点区别非常重要，尤其是自己来实现web页面中的对话框时。

bootstrap是目前一种流行的web界面框架，提供了丰富的样式，视觉效果较好。它也对模式对话框提供了底层的支持。本篇文章介绍如何实现和应用bootstrap样式的模式对话框。

二、一个简单例子

首先来看一个最简单的例子，在html页面内，最好在body节点下（不要放在其它节点下，避免形成干扰）建立要显示的对话框内容。如：

<body>

……..

</body>

这时运行页面，该对话框是不显示的。该对话框与普通的div元素相比，唯一区别就是设置了一个modal fade的class样式。

下面我们看看怎么通过js调用显示该对话框。其实很简单，只用一句代码：

$("#myModal2").modal();

显然，该对话框上没任何信息，样式也很难看，没有任何作用。

不过Bootstrap已经提供了很多界面美好的对话框样式，我们可以直接使用。下面我们继续介绍。

三、alert对话框的实现

下面我们实现一个类似alert功能的对话框，首先编写html代码，为对话框的内容。

<div class="modal fade" role="dialog" tabindex="-1" id="myModal2">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title">提示</h4>

            </div>

            <div class="modal-body">

                操作出现错误！

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" >确定</button>

            </div>

        </div>

    </div>

</div>

可以看出，上面的是一个标准的对话框（这里是一个提示框），有标题栏（在样式为modal- header的div内，包括一个关闭按钮），有正文部分（在样式为modal-body的div内），有操作按钮（在样式为modal- footer的div内，上面代码只有一个按钮，可以自己加多个）。

现在有js调用显示该对话框： $("#myModal2").modal();

对话框界面会显示出来。这时

我们会发现进行如下几种操作，该对话框会关闭：

1）点击最右上角的 x 按钮

2）点击对话框外的背景部分

3）按下 Ese 键

其中1）很正常。

对于2）如果我们希望点击对话框外的背景部分，对话框不会关闭（大部分场景下我们希望如此效果），只需在js调用modal方法时传入设置参数即可，如：

$("#myModal2").modal({backdrop:'static'});

这是再去点击对话框外的背景部分，不会关闭。

如果我们希望按下 Ese 键对话框也不会关闭，只需增加新的配置项即可，如：

$("#myModal2").modal({backdrop:'static',keyboard: false});

这时我们无论是点击对话框外的背景部分，还是按下Ese键，对话框都不会关闭。

还存在一个问题，对于提示框，一般点击“确定”按钮，对话框也会关闭，那这怎么实现呢？有个最简单的方法，就是为button元素增加一个data-dismiss值为modal的属性即可。如：

</div>

加上了这个属性后，当对话框显示时，点击这个确定按钮，对话框就会关闭了。

需要特别注意的是：Bootstrap中的模式对话框，虽然从界面上说是模式的，比如有背景，当设置backdrop:'static'时，背景是不响应操作的。但是与alert等标准对话框比，modal方法的调用却不会让js代码堵塞在这里（这个在前面已经有综合介绍，这里再详细举例介绍下），该语句下的代码会继续执行。如：

$("#myModal2").modal({backdrop:'static',keyboard: false});

$("#findTextId").val("hello");

上面的代码，调用modal语句后，会显示对话框，但后面的$("#findTextId").val("hello")语句会被执行。也就是说modal语句不会堵塞住。我们再看标准的 alert语句：

alert("操作出现错误");

$("#findTextId").val("hello");

上面的代码，alert语句执行后，显示对话框，但在该对话框被关闭前，$("#findTextId").val("hello")语句不会被执行。也就是说alert语句会堵塞住。

所有，如果在一个函数内，通过调用modal语句希望显示对话框后，后面的代码不会被执行，就不要忘了在modal语句后加上return语句。

四、confirm功能对话框的实现

下面我们实现一个类似confirm功能的对话框，首先编写html代码，为对话框的内容。

<div class="modal fade" role="dialog" tabindex="-1" id="myModal2">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title">确认</h4>

            </div>

            <div class="modal-body">

                真的要删除该记录吗？

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" data-dismiss="modal" id="okModalBtn">确定</button>

                <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>

            </div>

        </div>

    </div>

</div>

与提示框，相比，增加了一个按钮。但最核心的区别是我们希望调用确认框后，当对话框关闭后，后续的代码知道对话框是确定关闭的，还是取消关闭的。理想上，我们希望的调用代码如：

var re = $("#myModal2").modal({backdrop:'static',keyboard: false});

if(re){

　　 doSometing();

}

else{

　　doOtherSometing();

}

那如何支持上面的代码呢？

实际上是不可能按上面的方式实现的。因为前面也讲了，Bootstrap上的对话框只是界面上看上去是模式的，但代码层面无法堵塞，modal方法根本无法堵塞住，也没法返回值。

要实现点击不同按钮有不同的处理的逻辑，需要自己写额外代码处理。这里给出一种解决方案，代码如：

function deleteObj (para){

$("#okModalBtn").unbind("click");

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

doAction(para);

});

$("#myModal2").modal({backdrop:'static',keyboard: false});

}

deleteObj方法是被调用显示对话框，上面代码中的 okModalBtn 是为对话框中确定按钮的id值（目的是为了获取到该元素，当然也可以通过别的方式）。当deleteObj方法被调用时，首先我们为确定按钮解除click事件，然后再绑定click事件。最后调用modal方法显示对话框。需要注意的是，采用上面的方式，一定要先解除click事件，否则的话每打开一次对话框都会绑定一次click事件，就存在绑定多个响应的问题。

五、输入对话框的实现

下面我们实现一个类似prompt功能的对话框，可以弹出对话框让用户输入信息。首先编写html代码，为对话框的内容。

<div class="modal fade" role="dialog"  id="myModal5">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title">输入信息</h4>

            </div>

            <div class="modal-body">

                <div class="form-group">

                    <label>请输入信息 &nbsp;&nbsp;  <span id="hintTextId" style="color:red;display:none">*输入信息不允许为空！<span></label>

                    <input type="text" class="form-control" id="inputTextId" required autofocus>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary"  id="okModalBtn5">确定</button>

                <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>

            </div>

        </div>

    </div>

</div>

与确认对话框相比，就是对话框内容部分增加了一个输入框。注意

这里确定按钮没有设置自动关闭对话框，因为需要检查输入框的内容，如果输入框没有输入信息，点击确定按钮，会给出提示，并且对话框不会关闭。对话框通过js代码进行关闭。相应的调用代码如：

function call(){

$("#okModalBtn5").unbind("click");

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

if(!$("#inputTextId").val()){

$("#hintTextId").css("display","");

$("#inputTextId").focus();

return;

}

alert($("#inputTextId").val()); //处理数据

$("#myModal5").modal("hide");

});

$("#hintTextId").css("display","none");

$("#myModal5").modal({backdrop:'static',keyboard: false});

}

实现了上面的输入对话框，再复杂的对话框，其区别只是对话框中的内容差别了，这里只是一个简单的输入框，可以放置更多、更复杂的界面元素。

六、小结

上面介绍了，在bootstrap框架中如何实现和使用几种最基本和常用的对话框。完全可以在这基础上实现更为复杂的对话框。一些其它细节信息可以参考bootstrap的官方文档。

Bootstrap技术: 模式对话框的使用的更多相关文章

JAVA的模式对话框和非模式对话框
周末的时候,一位网友让我帮他把他的无模式对话框改成有模式对话框. 界面是由swing制作的,都是JFrame,我从来没有接触过swing编程.大致的代码还是看的懂,很多都和C#很相似. 然后就去查资料 ...
Qt之模式、非模式、半模式对话框
简述关于"模式"和"非模式"对话框,相信大家都比较熟悉,但其中有一个可能很多人都比较陌生,介于两者之间的状态,我们称之为"半模式". 简述 ...
wxPython Modal Dialog 模式对话框
<wxPython in Action>chap 9 笔记 1. Modal Dialog(模式对话框) A modal dialog blocks other widgets from ...
模式对话框里的CheckedChanged事件
问题: 模式对话框里的CheckedChanged事件不被触发: 解决方法: 一.先不直接showModalDialog出要的页面,而是要放一个中单页面 window.showModalDialo ...
轮值CEO胡厚崑：到2025年所有的企业都将用到云（云的2.0时代，会有几千朵云几万朵云升起来，这将产生不同的技术模式、商业模式、思维模式）
2016年09月04日 07:38 中国经营报李凡在全国工商联“2016年中国民营企业500强”排行榜上夺得头把交椅的华为,向外界描绘了面向未来进一步做大做强的路径. 华为创始人任正非于201 ...
MFC模式对话框与非模式对话框消息处理顺序
对话框有两种创建方式:DoModal和Creat. 其中DoModal创建的是模态的对话框,而Creat创建的是非模态的对话框下面总结下他们的不同. 对于模态的对话框,在该对话框被关闭前,用户将不能在 ...
Qt 半模式对话框
今天看视频,学习好半模式对话框,好新奇哟,这里记录下来. 半模式对话框,介于模式对话框和飞模式对话框之间.半模式对话框会像模式对话框一样阻塞主界面的事件响应,同时,半模式对话框会像非模态对话框一样,立 ...
【转】VC 模式对话框和非模式对话框的创建，销毁和区别
原文网址:http://blog.csdn.net/mycaibo/article/details/6002151 VC 模式对话框和非模式对话框的创建,销毁和区别在WIN32中,模式对话框的创 ...
Qt之模式、非模式对话框
关于“模式”和“非模式”对话框,相信大家都比较熟悉,但其中有一个可能很多人都比较陌生,介于两者之间的状态,我们称之为“半模式“. 模式对话框描述阻塞同一应用程序中其它可视窗口输入的对话框.模式对话 ...

随机推荐

discuz bbs注册，登录流程整理！想打通bbs又不想读一遍代码可以参考一下
bbs 用户注册流程第一步: /source/class/class_member.php: on_register注册入口 L602 左右 if(!$activation) {//不为空,说明用户 ...
FreeCodeCamp：Slasher Flick
要求: 打不死的小强! 返回一个数组被截断n个元素后还剩余的元素,截断从索引0开始. 结果: slasher([1, 2, 3], 2) 应该返回 [3]. slasher([1, 2, 3], 0) ...
linux驱动: 如何向模块传递参数, module_param和module_param_array
如何向模块传递参数,Linux kernel 提供了一个简单的框架. 1. module_param(name, type, perm); name 既是用户看到的参数名,又是模块内接受参数的 ...
Software Version --hdu1976
#include using namespace std; int main() { int T; cin>>T; int a1,b1,c1; int a2,b2,c2; while(T- ...
《Java TCP/IP Socket 编程》读书笔记之十一：深入剖析socket——TCP套接字的生命周期
转载请注明出处:http://blog.csdn.net/ns_code/article/details/16113083 建立TCP连接新的Socket实例创建后,就立即能用于发送和接收 ...
mysql merge table
SELECT COUNT(*) FROM `comment` SHOW CREATE TABLE `comment` CREATE TABLE `comment1` ( `id` INT(8) NOT ...
SQL Server SQL高级查询语句小结（转）
--select select * from student; --all 查询所有 select all sex from student; --distinct 过滤重复 select disti ...
二分图最大匹配 hdoj 1045
题目:hdoj1045 题意:给出一个图.当中有 . 和 X 两种,. 为通路,X表示墙,在当中放炸弹,然后炸弹不能穿过墙.问你最多在图中能够放多少个炸弹? 分析:这道题目是在上海邀请赛的题目的数据简 ...
iOS系统自带的 UIAlertView 自动旋转的实现
这里主要解析 UIAlertView 的几个关键功能的实现: 随着设备屏幕的旋转而旋转: Alert弹出框,使用UIWindow来实现,就是说,不用依赖于当前显示在最前面的UIView. 实现源码参考 ...
第一篇：NSOperation的概念
一.说明 NSOperation的作口:配合使用NSOperation和NSOperationQueue也能实现多线程 NSOperation和NSOperationQueue实现多线程的具体步骤: ...

Bootstrap技术: 模式对话框的使用

Bootstrap技术: 模式对话框的使用的更多相关文章

随机推荐

热门专题