`
天梯梦
  • 浏览: 13729927 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

禁止点击背景而关闭bootstrap弹出框 Disable click outside of bootstrap model area to close mod

 
阅读更多

On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal.
As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc.

 

If you opening the modal by js use:

$('#myModal').modal({backdrop: 'static', keyboard: false})

 

If you are using data attributes, use:

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
   Launch demo modal
</button>`

 

原文:http://stackoverflow.com/a/22208662/602382

转自:Disable click outside of bootstrap model area to close modal

 

 

 

 

 

 

分享到:
评论

相关推荐

    Bootstrap弹出框

    关闭按钮是一个`&lt;button&gt;`元素,class为`.close`,并且带有`data-dismiss="modal"`属性,点击后会关闭弹出框。 Bootstrap还提供了多种预定义的弹出框选项,例如`fade`类用于添加淡入淡出效果,`show`类用于初始显示...

    可拖拽的bootstrap弹出窗口

    在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的位置。这个功能是通过结合Bootstrap的弹出插件与jQuery UI库来实现的。 首先,`Bootstrap` 是一个...

    Bootstrap弹出框水平居中,垂直居中

    Bootstrap弹出框水平居中,垂直居中

    Bootstrap点击弹出层用户登录窗口模板

    在本资源中,我们关注的是一个特定的Bootstrap模板——"Bootstrap点击弹出层用户登录窗口模板",这个模板是基于Bootstrap 3.3.5版本构建的,它具有高效和易用的特点。 Bootstrap 3.3.5是该框架的一个稳定版本,包含...

    简介BootStrap model弹出框的使用

    Bootstrap Model弹出框是Bootstrap框架中的一个重要组件,用于创建模态对话框,即在当前页面上弹出一个浮动窗口,用户可以在不离开当前页面的情况下查看或操作内容。它提供了丰富的功能,包括自定义内容、控制行为...

    Bootstrap弹出框(Popover)实现指南:从基础到高级应用

    其中,弹出框(Popover)是一个常用的交互组件,用于在用户点击或悬停某个元素时显示额外的信息。本文将详细介绍如何在Bootstrap中实现弹出框,包括基础用法、选项配置、事件处理以及自定义样式。 Bootstrap的弹出框...

    BootStrap中的模态框(modal,弹出层)功能示例代码

    在Bootstrap框架中,模态框(Modal)是一种非常实用的组件,它允许用户在当前页面上弹出一个对话框,而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项,使得开发者能够轻松创建各种类型的弹出窗口,如...

    js,bootstrap 城市弹出框

    在网页开发中,"js,bootstrap 城市弹出框"是一个常见且实用的功能,它结合了JavaScript(js)的动态交互与Bootstrap框架的优雅设计,为用户提供了一个方便选择城市的下拉弹出框。Bootstrap是一款流行的前端开发框架...

    jQuery+Bootstrap美化弹出框

    4. 使用jQuery监听触发器元素的事件,例如`click`,在事件回调中调用Bootstrap的`.modal('show')`或`.modal('hide')`方法来显示或关闭弹出框。 5. 可以进一步通过jQuery修改弹出框的内容、样式,或者添加交互逻辑,...

    bootstrap 点击图片 弹框变大

    用户点击缩略图后,会弹出一个全屏模态窗口显示大图,再次点击全屏图片或关闭按钮则退出全屏模式。这个功能在 `index.html`、`index2.html`、`index3.html` 和 `index4.html` 文件中都可以应用,只需相应地修改图片 ...

    bootstrap 弹出层样式

    只提供了bootstrap弹出框样式 非常简洁

    基于bootstrap的jquery弹出层确认框插件

    PopConfirm是一款基于bootstrap的jquery弹出层确认框插件。该jquery弹出层确认框插件兼容bootstrap2和bootstrap3。它能够使用bootstrap Popover来替代确认框功能,非常方便。

    bootstrap提示框定时消失

    Bootstrap 提示框定时消失是网页动态效果的一种常见应用,它为用户提供了一种优雅的方式来显示信息、警告或错误,而这些信息会在一定时间后自动消失,无需用户手动关闭。这种功能通常借助于 JavaScript 库,如 ...

    bootstrap weebox 支持ajax的模态弹出框

    Bootstrap Weebox是一款基于Bootstrap框架的模态弹出框插件,特别强调其对AJAX的支持和丰富的功能。它经过多次优化与改进,目前版本稳定,集成了Bootstrap的响应式设计,确保在不同设备上都能呈现出良好的用户体验。...

    整理关于Bootstrap模态弹出框的慕课笔记

    《深入理解Bootstrap模态弹出框》 Bootstrap模态弹出框是网页设计中常见的一种交互元素,它允许用户在不离开当前页面的情况下查看或处理额外的信息或执行操作。Bootstrap框架通过简洁的HTML、CSS和JavaScript实现了...

    JS组件Bootstrap实现弹出框和提示框效果代码

    Bootstrap的弹出框是内置于`bootstrap.js`和`bootstrap.css`文件中的,因此只需引入这些库,就能轻松使用弹出框组件。下面是一个基本的弹出框HTML结构示例: ```html &lt;button type="button" class="close" ...

    Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件是一种交互式的UI组件,它在用户将鼠标悬停在特定元素上时展示一个扩展的信息视图。这个插件是基于Bootstrap框架,与工具提示(Tooltip)功能相似,但提供了更多的内容空间。在...

    Bootstrap 第16章 弹出框和警告框插件

    弹出框主要用于展示额外的信息,当用户对某个元素执行特定操作(如悬停或点击)时,弹出框会以优雅的方式显示。它们通常用于添加上下文帮助文本、提示或简短的说明。在Bootstrap中,弹出框可以通过`data-toggle=...

    Bootstrap点击弹出注册登录界面模板

    这个模板特别之处在于,它将注册和登录界面设计成了点击后弹出的模态框,这样的设计能够节省页面空间,提高用户体验,尤其是对于移动设备而言。 首先,模态框(Modal)是Bootstrap中的一个关键组件,它允许内容以...

    escape关闭bootstrap响应式弹出层

    本篇文章将深入探讨如何利用Bootstrap实现响应式弹出层,并介绍如何通过`escape`键来关闭它们。 首先,让我们了解Bootstrap的弹出层是如何工作的。在Bootstrap中,弹出层是由`.modal`类控制的。创建一个基础的弹出...

Global site tag (gtag.js) - Google Analytics