bootstrap模态框（bootstrap 模态框弹出时被遮罩层挡住了，怎么解决）

本文目录

• bootstrap 模态框弹出时被遮罩层挡住了，怎么解决
• Bootstrap 模态框（Modal）使用
• 懂bootstrap的过来看看，bootstrap模态框的问题
• bootstrap 模态框（modal）点击空白处和ESC不关闭的方法
• bootstrap 模态框 modal 插件在一个含有多个页面
• BootStrap模态框怎么实现打开一个其他的网页
• Bootstrap多层模态框如何嵌套
• bootstrap 模态框 每天自动弹出一次怎么实现
• bootstrap 模态框的关闭后，背景仍然是暗色的

bootstrap 模态框弹出时被遮罩层挡住了，怎么解决

bootstrap 模态框弹出时被遮罩层挡住了是设置错误造成的，解决方法为：

1、打开WebStorm开发工具，新建‘test.html’文件，并在文件同级目录安装部署Bootstrap相关文件，目录结构如下图。

2、在‘test.html’中写如下代码。

3、网页查看效果如下图，这时点击按钮还没有相应，因为没有对应的代码。

4、修改‘test.html’代码如下。

5、网页查看效果，点击按钮，可以正常弹出模态框，点击网页其他位置模态框消失。

6、在模态框上增加取消按钮，点击取消后模态框消失，代码如下。

Bootstrap 模态框（Modal）使用

定义一个a标签，通过标签的点击事件调用Modal
《a id="add" class="btn btn-info" onclick="add();"》新增《/a》

点击保存后刷新当前页面
parent.location.reload();

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

解决方法：

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

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

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

建立模态对话框

1.选择File/New/MFC AppWizard，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.在MFC ClassWizard 上选择OK.

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

#include "Dialogproty.h"

class CTestView : public CView

{

protected: // create from serialization only

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

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

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

void CTestView::OnTest()

{

// TODO: Add your command handler code here

CDialogproty dlg;

dlg.DoModal();

}

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

参考资料

CSDN博客.CSDN博客

bootstrap 模态框（modal）点击空白处和ESC不关闭的方法

bootstrap 模态框（modal）默认点击非模态框部分和键盘esc会关闭模态框，但是有时会有需求不允许关闭，所以介绍一下实现这种需求的两种方法。

第一种：使用js

$(’#modal’).modal({backdrop: ’static’, keyboard: false});

backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭.

第二种：使用属性

data-backdrop="static" data-keyboard="false"

如：

bootstrap 模态框 modal 插件在一个含有多个页面

　　模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
　　如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
　　用法
　　您可以切换模态框（Modal）插件的隐藏内容：
　　通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
　　通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
　　$(’#identifier’).modal(options)
　　实例
　　一个静态的模态窗口实例，如下面的实例所示：
　　实例
　　《h3》创建模态框（Modal）《/h3》
　　《!-- 按钮触发模态框 --》
　　《button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"》开始演示模态框《/button》
　　《!-- 模态框（Modal） --》
　　《div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"》
　　《div class="modal-dialog"》
　　《div class="modal-content"》
　　《div class="modal-header"》
　　《button type="button" class="close" data-dismiss="modal" aria-hidden="true"》×《/button》
　　《h4 class="modal-title" id="myModalLabel"》模态框（Modal）标题《/h4》
　　《/div》
　　《div class="modal-body"》在这里添加一些文本《/div》
　　《div class="modal-footer"》
　　《button type="button" class="btn btn-default" data-dismiss="modal"》关闭《/button》
　　《button type="button" class="btn btn-primary"》提交更改《/button》
　　《/div》
　　《/div》《!-- /.modal-content --》
　　《/div》《!-- /.modal --》
　　《/div》
　　尝试一下 ?0?3
　　结果如下所示：
　　模态框（Modal）插件
　　代码讲解：
　　使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
　　如果您仔细查看上面的代码，您会发现在 《button》 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
　　在模态框中需要注意两点：
　　第一是 .modal，用来把 《div》 的内容识别为模态框。
　　第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
　　aria-labelledby="myModalLabel"，该属性引用模态框的标题。
　　属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
　　《div class="modal-header"》，modal-header 是为模态窗口的头部定义样式的类。
　　class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
　　data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
　　class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
　　class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
　　data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
　　选项
　　有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
　　选项名称类型/默认值Data 属性名称描述
　　backdropboolean 或 string ’static’
　　默认值：truedata-backdrop指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
　　keyboardboolean
　　默认值：truedata-keyboard当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
　　showboolean
　　默认值：truedata-show当初始化时显示模态框。
　　remotepath
　　默认值：falsedata-remote使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：
　　《a data-toggle="modal" href="remote.html" data-target="#modal"》请点击我《/a》
　　方法
　　下面是一些可与 modal() 一起使用的有用的方法。
　　方法描述实例
　　Options: .modal(options)把内容作为模态框激活。接受一个可选的选项对象。
　　$(’#identifier’).modal({
　　keyboard: false
　　})
　　Toggle: .modal(’toggle’)手动切换模态框。
　　$(’#identifier’).modal(’toggle’)
　　Show: .modal(’show’)手动打开模态框。
　　$(’#identifier’).modal(’show’)
　　Hide: .modal(’hide’)手动隐藏模态框。
　　$(’#identifier’).modal(’hide’)
　　实例
　　下面的实例演示了方法的用法：
　　实例
　　《!-- 模态框（Modal） --》
　　《div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"》
　　《div class="modal-dialog"》
　　《div class="modal-content"》
　　《div class="modal-header"》
　　《button type="button" class="close" data-dismiss="modal" aria-hidden="true"》×《/button》
　　《h4 class="modal-title" id="myModalLabel"》模态框（Modal）标题《/h4》
　　《/div》
　　《div class="modal-body"》按下 ESC 按钮退出。《/div》
　　《div class="modal-footer"》
　　《button type="button" class="btn btn-default" data-dismiss="modal"》关闭《/button》
　　《button type="button" class="btn btn-primary"》提交更改《/button》
　　《/div》
　　《/div》《!-- /.modal-content --》
　　《/div》《!-- /.modal-dialog --》
　　《/div》
　　《!-- /.modal --》
　　《script》
　　$(function() {
　　$(’#myModal’).modal({
　　keyboard: true
　　})
　　});
　　《/script》
　　尝试一下 ?0?3
　　结果如下所示：
　　模态框（Modal）插件方法
　　只需要点击 ESC 键，模态窗口即会退出。
　　事件
　　下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
　　事件描述实例
　　show.bs.modal在调用 show 方法后触发。
　　$(’#identifier’).on(’show.bs.modal’, function () {
　　// 执行一些动作...
　　})
　　shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
　　$(’#identifier’).on(’shown.bs.modal’, function () {
　　// 执行一些动作...
　　})
　　hide.bs.modal当调用 hide 实例方法时触发。
　　$(’#identifier’).on(’hide.bs.modal’, function () {
　　// 执行一些动作...
　　})
　　hidden.bs.modal当模态框完全对用户隐藏时触发。
　　$(’#identifier’).on(’hidden.bs.modal’, function () {
　　// 执行一些动作...
　　})
　　实例
　　下面的实例演示了事件的用法：
　　实例
　　《!-- 模态框（Modal） --》
　　《h3》模态框（Modal）插件事件《/h3》
　　《!-- 按钮触发模态框 --》
　　《button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"》开始演示模态框《/button》
　　《!-- 模态框（Modal） --》
　　《div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"》
　　《div class="modal-dialog"》
　　《div class="modal-content"》
　　《div class="modal-header"》
　　《button type="button" class="close" data-dismiss="modal" aria-hidden="true"》×《/button》
　　《h4 class="modal-title" id="myModalLabel"》模态框（Modal）标题《/h4》
　　《/div》
　　《div class="modal-body"》点击关闭按钮检查事件功能。《/div》
　　《div class="modal-footer"》
　　《button type="button" class="btn btn-default" data-dismiss="modal"》关闭《/button》
　　《button type="button" class="btn btn-primary"》提交更改《/button》
　　《/div》
　　《/div》《!-- /.modal-content --》
　　《/div》《!-- /.modal-dialog --》
　　《/div》
　　《!-- /.modal --》
　　《script》
　　$(function() {
　　$(’#myModal’).modal(’hide’)
　　})});
　　《/script》
　　《script》
　　$(function() {
　　$(’#myModal’).on(’hide.bs.modal’,
　　function() {
　　alert(’嘿，我听说您喜欢模态框...’);
　　})
　　});
　　《/script》

BootStrap模态框怎么实现打开一个其他的网页

前端框架 Bootstrap 模态框使用 remote 选项指定
URL框第弹候自址加载数据 .modal-body 加载通事件调用
removeData() 解决问题
1、Bootstrap 模态框简单使用
x
框标题
框主体
取消
确定
使用按钮或链接直接调用模态框简单用：
打框
打框
能静态内容框显示使用框 remote 选项实现更强效
2、使用 remote 选项让模态框加载页面 .modal-body
两种种使用链接另种使用脚本
2.1 使用链接
打框
点击链接page.jsp 内容加载框 .modal-body 随即显示框
2.2 使用脚本
$("#myModal").modal({
remote: "page.jsp"
});
段脚本效使用链接段脚本执行page.jsp 内容加载框 .modal-body 随即显示框
两种背都 Bootstrap 调用 jQuery load() 服务器端加载 page.jsp
页面加载发面管点击几链接或者执行几脚本哪怕改变传递给 remote
选项值框都重新加载页面真让疼事情问题能够解决
3、 移除数据让框能够每打重新加载页面
搜索并查阅相关文档发现框 hidden 事件写条语句：
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
每打框前移除数据效
,

Bootstrap多层模态框如何嵌套

使用js去弹出第二个模态框
《!DOCTYPE html》
《html》
《head》
《meta charset=’utf-8’》
《title》bootstrap模态框(modal)《/title》
《link href="../../css/bootstrap.min.css" rel="stylesheet"》
《script src="../../js/jquery-2.1.1.min.js"》《/script》
《script src="../../js/bootstrap.min.js"》《/script》
《!--jquery必须是1.9.0版本以上的
--》
《script》
$(function(){
$("#btn2").click(function(){

$("#show2").modal("show");
});

})
《/script》
《/head》
《body》
《div class="container "》
《h1 class="page-header"》bootstrap模态框(modal)《/h1》
《button class="btn btn-primary" data-toggle=’modal’ data-target=’#show’》登陆《/button》
《div class="modal fade " id=’show’ 》
《div class="modal-dialog"》
《div class="modal-content"》
《button class="close" data-dismiss=’modal’》×《/button》
《h1 class="modal-title"》一层模态框《/h1》
《div class="modal-footer"》
《button class="btn btn-primary" data-toggle=’modal’ id="btn2"》再弹《/button》
《/div》
《/div》
《/div》
《/div》
《div class="modal fade " id=’show2’》
《div class="modal-dialog"》
《div class="modal-content"》
《button class="close" data-dismiss=’modal’》×《/button》
《h1 class="modal-title"》二层模态框《/h1》
《div class="modal-body"》
12312312
《/div》
《div class="modal-footer"》

《/div》
《/div》
《/div》
《/div》
《/div》
《/body》
《/html》

bootstrap 模态框 每天自动弹出一次怎么实现

bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
***隐藏网址***

bootstrap 模态框的关闭后，背景仍然是暗色的

1.这个问题是两种写法不同造成的

第一种
$(’#avatar-modal’).modal(’hide’);
这种写法模态框会关闭，并背景恢复。

第二种
$(’#avatar-modal’).modal().hide();
这种写法，模态框会消失，但暗色背景仍然在。不能操作。
所以建议bootstrap相关语法，用第一种即可。

2.解决二级模态框关闭后，遮罩阴影依然存在，导致页面无法操作的BUG

在项目后台中由于需要展示二级模态框，在点击关闭二级模态框（弹出框）的时候出现了遮罩阴影依然存在，导致页面呈现暗灰色，无法操作的现象效果图如下：

出现改问题的原因是：由于点击“关闭”按钮或点击模态框右上角的“X”或点击模态框右边的空白处，会使两层或多层模态框同时关闭，但是modal自己生成的遮罩层只关闭了一个，其他的依然存在，因此导致遮罩阴影覆盖原有页面，导致无法操作页面。

解决问题的方法：（1）当最外层的modal关闭后，手动删除所有的遮罩层：$("#soldier-modal”).remove()

问题总结： 这些问题所涉及到的都是些前端的知识，是bootstrap中的模态框的应用。