`

Model模态框点击其他除了模态框区域不消失

 
阅读更多
问题:
相信许多的小伙伴在使用Model(模态框)的时候都遇到多一个问题,就是在使用模态框时,在模态框中编辑一些信息,点击黑色区域(就是除了×号和按钮的暗色区域),模态框会消失,而再次打开模态框是,原来编辑的信息还在,十分的烦恼,那么怎么解决这个问题呢?
解决:data-backdrop="static"

案例
引用
<div class="modal fade" id="add" tabindex="-1" role="dialog" data-backdrop="static" >
//在模态框在最外层添加data-backdrop="static"就可以使模态框点击除了×号和关闭按钮外的其他区域不消失。


https://blog.csdn.net/m0_37626813/article/details/78303773
分享到:
评论

相关推荐

    bootstrapTable-model模态框可拖动代码.zip

    在BootstrapTable中,$model(Model)通常指的是模态框(Modal),这是一种弹出窗口,常用于显示详细信息、进行用户交互或者接收用户输入。在本示例中,“bootstrapTable-model模态框可拖动代码.zip”包含了一个实现...

    js 实现模态框 model.js

    js 实现模态框

    vue+element 模态框表格形式的可编辑表单实现

    `@close`监听器可以设置当用户点击模态框外层的遮罩层或关闭按钮时执行的回调函数,例如在这里设置`isEdit = false`,使表单回到非编辑状态。 表格形式的可编辑表单通常会涉及到多个`el-form-item`和`el-input`、`...

    bootstrap model.js 单模态框的css,js

    Bootstrap Model.js是一款基于Bootstrap框架的JavaScript插件,用于创建交互式的单模态框(modal)效果。Bootstrap本身是一个流行的前端开发框架,它提供了一系列预先设计的CSS、JS组件,帮助开发者快速构建响应式和...

    C#MVC模态框增删查改

    在C# MVC(Model-View-Controller)框架中,模态框常用于实现用户界面的轻量级交互,尤其在进行数据操作如增加、删除、修改和查询时,可以提供一种不离开当前页面就能处理数据的方式。这既提高了用户体验,也简化了...

    一个漂亮的弹出层模态框和对话框

    在网页设计中,弹出层、模态框和对话框是不可或缺的元素,它们用于向用户展示重要信息、获取用户输入或执行特定操作。在这个名为"Ply-master"的项目中,我们可以推测它提供了一个优雅的JavaScript实现,用于创建这些...

    实现简单的模态框效果案例model_window.zip

    在Web前端开发中,模态框(Modal Window)是一种常见的用户界面元素,用于显示临时信息或需要用户交互的内容,而不离开当前页面。本案例"实现简单的模态框效果案例model_window.zip"包含以下组成部分:`model_window...

    JS 可拖动模态框.zip

    模态框(Modal Box)是一种常见的用户界面元素,它会在当前页面上显示一个弹出窗口,使得用户必须与其交互后才能继续浏览网站的其他部分。 模态框通常用于显示警告、确认信息或者进行表单输入等场景。而添加拖动...

    BootStrap 模态框实现刷新网页并关闭功能

    设置`backdrop: 'static'`后,模态框背景变为半透明但不可点击,用户必须点击关闭按钮或执行其他预定操作才能关闭模态框。 总结,Bootstrap模态框提供了丰富的功能和灵活性,允许我们在各种场景下实现复杂的需求。...

    模态对话框有时无法弹出解决方案

    在项目中,我遇到模态对话框无法弹出的情况。找了很久也咨询了很多人,找到了解决方案,分享给需要的人

    Bootstrap 模态框多次显示后台提交多次BUG的解决方法

    我们在使用 Bootstrap 模态框时,点击按钮弹出模态框,然后填写对应的信息,然后使用 Ajax 提交表单信息到后台。这种情况下,如果我们多次点击模态框,每次点击都会触发一次提交事件,从而导致多次 alert("提交")。 ...

    bootstrap 模态框(modal)实现水平垂直居中显示

    通过这种方法,我们能够在不修改Bootstrap源码的前提下,实现模态框在显示时的水平垂直居中,同时避免了闪烁的问题,提高了用户体验。 总结来说,Bootstrap模态框的水平垂直居中可以通过监听模态框显示事件,结合...

    AngularJS中使用ngModal模态框实例

    在控制器modalController中,定义了一个方法openModel,用于打开模态框。这个方法使用了$modal服务的open方法来创建模态框实例。 4. **模态框控制器modalCtrl**:创建模态框实例时,可以指定一个控制器,这里是...

    Bootstrap 模态框(Modal)带参数传值实例

    例如下面窗体:点击任意一个模态框(”回复”按钮),如果不做任何处理,则会出现回复混淆,甚至程序出错的情况。  为了实现其回复的唯一性和带参传值的功能,需要做以下处理 实现的效果: 总结 以上所述是小...

    在iframe中使bootstrap的模态框在父页面弹出问题

    在这个解决方法中,我们使用了bootstrap的remote属性,使模态框在父页面弹出,remote属性可以指定模态框的内容来自哪里,在这里,我们将其指定为 "./model.html",即模态框页面的地址。 在实际开发中,我们可以根据...

    通过layer实现可输入的模态框的例子

    文章首先通过一个按钮点击事件来触发模态框的显示。在页面中定义了一个隐藏的div,这个div包含着模态框的内容。当用户点击按钮后,通过JavaScript函数`check()`控制这个隐藏的div显示出来,从而实现模态框的弹出效果...

    easyui 模态窗口插件

    对于局部模态效果,即只在特定区域展现的模态窗口,可以通过调整 CSS 样式实现。例如,给模态窗口添加一个定位在某个元素上方的 CSS 类: ```css .local-modal { position: absolute; top: 50px; /* 调整为实际...

    model弹出框

    `data`文件夹可能包含了一些JSON格式的数据,用于填充Model弹出框的内容,比如动态生成的列表、表单数据或其他信息。这些数据可以通过JavaScript动态加载到HTML元素中,使得弹出框的内容更加灵活多变。 `js`文件夹...

    AngularJs 弹出模态框(model)

    在AngularJs中,弹出模态框(modal)是一种常见的用户交互方式,它允许开发者在不离开当前页面的情况下,向用户显示额外的信息或者获取用户输入。 AngularJs提供了实现模态框功能的服务,例如$modal。$modal服务是...

    详解vue父子组件关于模态框状态的绑定方案

    对于模态框的显示状态同步,常见的实现方式包括使用.sync修饰符和v-model指令。 使用.sync修饰符是最直接的实现方式。在父组件中,我们可以通过一个绑定的prop来控制子组件模态框的显示状态。当需要打开模态框时,...

Global site tag (gtag.js) - Google Analytics