Bootstrap模态窗口设置方法？懂Bootstrap的人来看看模态框问题。

本文目录：

• 1、懂bootstrap的过来看看，bootstrap模态框的问题
• 2、bootstrap使用模态框当弹出两层的时候，遮罩层会把原有的透明度减少。
• 3、bootstrap模态框背景灰色，按钮全部无法点击，求解决办法

首先要引入bootstrap的js和css依赖，然后如下编写页面，

Launch demo modal

懂bootstrap的过来看看，bootstrap模态框的问题

解决方法：

・ 在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”，即可。

・ 在需要显示模态框，初始化时，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中，backdrop：’static’指的是点击背景空白处不被关闭； keyboard:false指的是触发键盘esc事件时不关闭。

模态对话框(Modal DialogueBox，又叫做模式对话框)，是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。

建立模态对话框

1.选择File/New/MFC AppWizard[exe]，Project name为Test,单击OK.

2.选择Single document,单击Finish.

3.选择左侧Workspace/ResourceView,在Dialog上单击右键,选择Insert Dialog,默认名字为IDD_DIALOG1.

4.双击右侧工作区中的对话框,弹出一对话框Adding a Class,默认选择Create a new class,单击OK.

5.在对话框New Class中,在Name中填入CDialogproty,Base class选择缺省名字CDialog,单击OK.在MFCClassWizard 上选择OK.

6.选择左侧Workspace/ClassView,双击CTestView

class CTestView : public CView

{

protected: // create from serialization only

7.选择左侧Workspace/ResourceView/Menu,双击IDR_MIANFRAME,在右侧工作区上方，"帮助(H)"后双击，弹出对话框MenuItem Properties,点击General/Pop-up,选为非选择状态，在ID内输入IDR_TEST，Caption中输入Test,关闭对话框Menu Item Properties,

8.在按钮Test上点击右键，选择ClassWizard...,在Messages中选择COMMAND，点击Add Function...,弹出对话框AddMember Function,点击OK,选择Edit Code.

9.在以下函数中添加代码

void CTestView::OnTest()

{

// TODO: Add your command handler code here

CDialogproty dlg;

dlg.DoModal();

}

10.编译，运行。点击菜单按钮Test,弹出对话框，点击OK!完成!

参考资料

CSDN博客.CSDN博客[引用时间2018-1-9]

bootstrap使用模态框当弹出两层的时候，遮罩层会把原有的透明度减少。

Modal.prototype.addZindex = function(){
zindexNumber += 10
this.$element.css('z-index', zindexNumber)
再设置遮罩层比弹出层小就可以了。

拓展：

1、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2、特点：Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

bootstrap模态框背景灰色，按钮全部无法点击，求解决办法

我这边也遇到了同样的问题, 发现是点击按钮弹出modal窗口所在的页面 与 它的上级页面中的元素有重复的id值, 将id值修改为不同值,modal弹窗就不会置灰无法编辑了, 请做参考