Bootstrap 模态弹出框在关闭时隐藏

2023-12-11

我有一个模式,当尝试运行时将激活弹出窗口进行验证。我为弹出窗口添加了一个超时,以便在 3 秒后隐藏。但是,如果您关闭模式,超时功能似乎会停止,弹出窗口不会隐藏,甚至直接告诉它隐藏也不起作用。

模态 HTML

<div class="modal hide fade" id ="password_modal">
    <div class="modal-header">
        <h3>Change Password <span class="extra-title muted"></span></h3>
    </div>
    <div class="modal-body form-horizontal">
        <div class="control-group">
            <label for="current_password" class="control-label">Current Password</label>
            <div class="controls">
                <input type="password" name="current_password">
            </div>
        </div>
        <div class="control-group">
            <label for="new_password" class="control-label">New Password</label>
            <div class="controls">
                <input type="password" name="new_password">
            </div>
        </div>
        <div class="control-group">
            <label for="confirm_password" class="control-label">Confirm Password</label>
            <div class="controls">
                <input type="password" name="confirm_password">
            </div>
        </div>      
    </div>
    <div class="modal-footer">
        <button href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button href="#" class="btn btn-primary" id="password_modal_save">Save changes</button>
    </div>
</div>

模态内部

options = {
    content: raw_data.errors,
    html: true,
    placement: 'top',
    trigger: 'manual'
}
$('#password_modal_save').popover(options);
$('#password_modal_save').popover('show');
setTimeout(function(){ click.popover('hide'); }, 3000);

模态密切监听者

$("body").on("hidden", "#password_modal", function(event){
    $(this).remove(); //Remove the modal to stop duplications
    $('#password_modal_save').popover('hide'); //Targetting the popover directly
    $('.popover').remove(); //Last solution to actually hiding it
});

我希望有一种更干净的方式来隐藏弹出窗口,而不是$('.popover').remove();

Fiddle: http://jsfiddle.net/La2yn/20/


使用 2.1.0 时存在一个错误,当模式关闭时,弹出窗口不会隐藏。更新到 2.3.1,弹出窗口现在也关闭模式 -.-

添加以下代码以停止事件冒泡并关闭模式

$("body").on("hidden", "#password_modal_save", function(e){
    e.stopPropagation(); //Once popover is hidden stop the event from going to parent
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 模态弹出框在关闭时隐藏 的相关文章

  • 如何在编译引导程序时修复较少的错误?

    附件是编译时使用的跟踪grunt dist webmaker Anils MacBook Pro bootstrap anil grunt dist Running clean dist clean task Running less co
  • Capybara-webkit 无法处理与 bootstrap glyphicon 的链接

    我有一个链接 link to q span class glyphicon glyphicon trash span html safe feed item data confirm Are you sure toggle tooltip
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • Twitter Bootstrap 上的插入符号是如何构建的?

    这更多的是一个好奇问题 而不是我真正需要知道的事情 在本页面 http twitter github com bootstrap components html buttonDropdowns http twitter github com
  • 切换按钮不适用于 AngularJS 和 Angular ui Bootstrap

    切换按钮出现 但不起作用 我现在在网上也有相同的代码 但它不起作用 但在 Plunker 中它可以工作 Plunker 切换按钮正在工作 http plnkr co edit R5F5D1FGyHiv9X1cfOoa p preview 在
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 字形和 bootstrap 4

    我正在尝试使用 glyphicon 中的 glyphicon 当您单击一个 glyphicon 时 它会提示您所需要做的就是添加 span class span 你想要字形的地方 但在下载它们后 我注意到它们都保存为 png 文件 有谁知道
  • 输入文本中固定下划线

    我试图修复所有输入文本类型中的下划线 但没有成功 Example My code input width 100 background color fcfcfc border 0 padding 10px div class col lg
  • Bootstrap 表单助手未选择完整的国家/地区名称

    我添加了引导表单助手来列出国家及其州 最初 它根本没有选择国家名称 但我设法用 jQuery 检索国家 地区名称 但它没有显示完整名称 这是表单的完整代码 div class signup form div class container
  • .selectpicker 不是一个函数

    我正在尝试使用引导选择 http silviomoreto github io bootstrap select 并从 javascript 引用它 但我总是收到错误 selectpicker is not a function 我读到的有
  • 当引导模式打开时如何防止正文内容滚动

    我正在使用 Angular UI Bootstrap模态框 http angular ui github io bootstrap modal 当模式打开时 主体有一个滚动条 当我滚动时 模式后面的内容也会滚动 我可以将溢出 隐藏到正文标记
  • Bootstrap 单选按钮:在提交表单时获取所选值

    我有下一个 Bootstrap 单选按钮 div class btn group div
  • 在引导下拉元素上使用 intro.js

    我不知道如何在下拉元素上使用 intro js 我发现了一个类似的问题 但没有答案 IntroJS Bootstrap 菜单不起作用 https stackoverflow com questions 20071122 introjs bo
  • 将 Bootstrap config.json 文件与 Bower 结合使用

    我使用了 Bootstrap 定制器工具 http getbootstrap com customize http getbootstrap com customize 它生成一个config json每当我需要进行更改时我都会重复使用的文
  • 具有 dropdown-menu-right 类的下拉菜单未向右对齐

    我有以下导航栏结构 current user username 来自我的模板系统 ul class navbar nav mr auto mt 2 mt lg 0 ul div class dropdown show a class dro
  • Bootstrap轮播不滑动

    我一直在尝试使用 Bootstrap Carousel 并在一定程度上取得了成功 我也可以单击并更改图像 但我有一个问题 只是不滑动而已 我哪里做错了 html div class carousel slide ol class carou
  • 通过单击外部关闭 Bootstrap 弹出窗口

    如何通过单击弹出窗口外部来关闭 Bootstrap 弹出窗口 目前它具有打开链接的切换功能 HTML div class widget rating span class rateit rating average span a class
  • Angularjs UI 模态表单

    我曾经使用引导模式有一个登录对话框 scope loginDialog backdrop true keyboard true windowClass modal loginDialog backdropClick true templat
  • 关闭 Bootstrap 模式 onclick

    我使用 Bootstrap 模式让用户在将商品添加到购物车之前选择产品选项 我之前在这种情况下使用过它们 没有任何问题 但这个没有按预期关闭 当用户单击 添加到购物车 按钮时 会发生一些事情 我认为问题就在那里 首先 一些脚本检查某些字段是
  • 当下拉列表内部触发选定索引更改事件时,引导模式关闭

    我在 Bootstrap 模式中有一个 ASP NET 图表 一切都工作正常 直到我在里面添加了一个下拉列表 每次我在下拉列表中选择一个新项目时 所选项目更改事件都会触发 并且如果事件内没有代码 则 Boostrap 模式会关闭 这是模式引

随机推荐

  • SQL Server 关系隐藏在存储过程而不是模式中

    目前 我们几乎没有引用完整性 并且拥有许多自连接的表 实际上 最好将其表示为单独的表或连接的视图 这些表如何相互关联的知识隐含在存储过程的逻辑中 而不是显式地存在于架构中 我们正在考虑改变这一点 第一步是真正理解隐含的关系并记录它们 所以我
  • 在递增号码上添加静态前缀

    我在表单上创建了一个名为trackingcode每次插入新数据时它都会增加 现在我考虑添加前缀 然后添加数字 所以我所做的是 Newtracking mysqli fetch assoc trackingQuery REQ maxtrack
  • 闪亮的 UI:保存输入中的更改

    我有一个很大的问题 我正在尝试运行一个具有很多不同设置的程序 这些设置可以在用户界面中设置 就我而言 用户可能需要多次使用相同的设置运行程序 我的问题是 如果刷新或重新启动用户界面 所有内容都会设置为默认值 例如 numericInput
  • 如何实现二维向量数组?

    我是第一次使用STL库中的向量类 我应该如何添加到向量数组的特定行 struct x vector
  • 修改终端中的文本

    是否可以在不清除屏幕的情况下修改我打印到终端的文本 例如 如果我以百分比显示某项进度 我可以修改该百分比而无需清除屏幕并再次打印吗 我正在寻找一种跨平台的方式 如果有的话 谈论C thanks 有多种方法可以做到这一点 并且根据您想要投入多
  • 创建 Func 以返回引用类型和值类型

    我有一个方法返回一个Func由如下表达式构建 var expr Expression Property Expressions Expression Constant new Foo Name Hans Age 3 typeof Foo A
  • C++ __COUNTER__ 定义

    我的计算机上安装了两个版本的 C 编译器 其中一位认识到 COUNTER 宏而另一个则没有 在做了一些研究以使程序在两者中编译之后 我还没有遇到宏定义 COUNTER 这是编译器完成的一些特殊宏还是我可以复制其定义 COUNTER 进入我的
  • 访问 JavaScript 对象变量属性 [重复]

    这个问题在这里已经有答案了 可能的重复 如何从 JavaScript 中的变量值创建对象属性 如何访问像这样存储在变量中的属性名称 var obj obj foo bar var propName foo I want something
  • 在等待结果时禁用 HTML 按钮

    当我单击 HTML 表单上的提交按钮时 将调用与该按钮相关的函数并执行其工作 完成工作后会发送邮件通知 这会耗费太多时间 之后 确认消息将显示在同一 HTML 页面上 不使用 Ajax 即刷新页面 我想避免让用户在发送邮件的等待期间混乱地多
  • 部署到 Google 计算引擎失败:检索 App Engine 服务帐户时出错

    After 我删除了一些值 不记得是哪个 在我的项目配置中 在开发者控制台 我无法将应用程序部署到计算引擎实例 我已经使用相同的配置成功部署了相同的代码数十次 但在删除开发人员控制台中的一些值或进行了一些我认为较小的其他调整后 使用 Mav
  • XPath 获取两个标题之间的标记

    我正在尝试编写一个小应用程序来从维基百科页面中提取内容 当我第一次想到是否可以时 我认为我可以只使用 XPath 来定位包含内容的 div 但在研究了 Wikipedia 如何构建他们的文章后 我很快发现这并不是那么容易 当我获取页面时分离
  • JavaScript 返回奇怪的值

    我正在测试一个函数 看看当它的参数是时会发生什么null并决定添加一个 else 语句 令我惊讶的是 它没有记录我传递的参数 而是完全记录其他内容 也许有人可以阐明这一点 这是代码 function testing o if o retur
  • 将预定义常量定义为什么

    我有一个数据库类 它自动建立与数据库的连接并执行一些基本的输入过滤等操作 我正在考虑设置一些预定义的常量来调整类方法的行为 我应该将常量的值设置为什么 由于这些值永远不会被直接引用或比较 而是仅在常量名称的上下文中 所以该值是否重要 我遇到
  • 导入错误:没有名为flask_mail的模块

    from flask mail import Mail Message from flask import Flask 我正在尝试邮寄 但发生导入错误 有两个同名的包 该项目在 GitHub 和PyPI uses flask mail作为包
  • 如何捕获 Fabric 中的身份验证错误并重试?

    我有两个用户名和相应的密码用于管理我的服务器 有没有办法让我的 fab 脚本 模块使用一个 如果第一个失败则使用第二个 而不必维护完整的凭据列表每个主机甚至一组主机 我在文档中看不到围绕 run 或类似的尝试 除外的方法 run和其他命令引
  • 选择不存在 Hibernate OneToOne 关联的实体

    我有两个类 它们之间具有双向 OneToOne 映射 Class A OneToOne fetch FetchType Lazy mappedBy a private B b Class B OneToOne fetch FetchType
  • 如何获取带有小数点和 2 位小数的文件夹大小(以 GB 为单位)?

    通过我的代码 我得到了以 GB 为单位的文件夹大小 没有小数位 但我需要 GB 格式 有小数点和小数点后 2 位 echo off for F tokens a IN dir C Users rinni abraham Desktop fr
  • SIFT openCV 的关键点数量?

    我使用以下代码提取并绘制图像中的 SIFT 关键点 但在我的代码中 我没有指定要提取多少个关键点 因此 这完全取决于图像有多少个关键点 我想要的是 我想指定图像中最多需要 20 个关键点 如果不存在 20 个关键点 则无需进一步处理 或者如
  • Haskell,当 A 类为 B 类提供足够的信息时生成 B 的实例

    在为集合 容器类型编写类时 顺便说一句 如果我重新发明轮子 则将我指向现有类型 以提供用于从任何 集合 类型添加和删除元素的通用接口 class Eq c a Monoid c a gt Collection c a where empty
  • Bootstrap 模态弹出框在关闭时隐藏

    我有一个模式 当尝试运行时将激活弹出窗口进行验证 我为弹出窗口添加了一个超时 以便在 3 秒后隐藏 但是 如果您关闭模式 超时功能似乎会停止 弹出窗口不会隐藏 甚至直接告诉它隐藏也不起作用 模态 HTML div class modal h