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之模式、非模式对话框
关于“模式”和“非模式”对话框,相信大家都比较熟悉,但其中有一个可能很多人都比较陌生,介于两者之间的状态,我们称之为“半模式“. 模式对话框描述阻塞同一应用程序中其它可视窗口输入的对话框.模式对话 ...

随机推荐

Implement custom foreach function in C#
http://msdn.microsoft.com/en-us/library/System.Collections.IEnumerator.aspx http://support.microsoft ...
CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
关于left join 和 inner join
今天遇到一个逻辑很复杂的SQL,虽然写出来了,但是并没有完全体会,找了找资料,算是摸清楚了left join和inner join 的实际意义. 感谢PCJIM的文章,写的非常明白,原文地址:http ...
ARM简介(科普文)
ARM简介[1] 1. ARM只卖知识产权,不卖(物理的,实质的)产品. 全世界100多家公司购买了ARM授权,包括三星,Freescale.NXP Semiconductors.STMicro ...
Linux下Apache服务器并发优化
Linux/UnixLinux系统下Apache 并发数的优化 Apache Http服务器采用prefork或者是worker两种并发控制模式. preforkMPM 使用多个子进程,每个子进程只 ...
EBS动态创建账户组合实现
目的:使用程序动态创建账户组合.如果账户组合存在的话,返回存在的ID,不存在的话就动态创建账户组合并返回id. 实现步骤: 1. 得到账簿的CHART_OF_ACCOUNTS_ID 2. 得到账户弹性 ...
在非MFC程序中使用调试宏 ASSERT(),VERIFY()和 TRACE()
游戏制作已经开始采用C++了,却鲜有人选择使用MFC.但笔者觉得的 ASSERT(),VERIFY()和 TRACE()这几个宏很好用.所以就想自己写一个版本来适应Windows平台下不同的工程类型. ...
【转】随机梯度下降（Stochastic gradient descent）和批量梯度下降（Batch gradient descent ）的公式对比、实现对比
梯度下降(GD)是最小化风险函数.损失函数的一种常用方法,随机梯度下降和批量梯度下降是两种迭代求解思路,下面从公式和实现的角度对两者进行分析,如有哪个方面写的不对,希望网友纠正. 下面的h(x)是要拟 ...
CreateThread与_beginthread, _beginthreadex创建线程的基本概念和区别（1）
这三个函数都可以创建新的线程,但都是如何创建的呢?当然MSDN文档最权威: Creates a thread to execute within the virtual address space o ...
H面试程序（16）：简单选择排序
#include<stdio.h> #include<assert.h> void display(int * a, int n) { assert(a); for(int i ...

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

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

随机推荐

热门专题