避免在单击内部特定按钮时关闭Bootstrap Modal
是通过阻止事件冒泡来实现的。在Bootstrap Modal中，当单击Modal内部的按钮时，默认情况下会触发Modal关闭的事件，这可能会导致不希望的效果。以下是可以实现这一目标的方法：
- 方法一：使用event.stopPropagation()方法阻止事件冒泡。
- 在按钮的点击事件处理程序中，添加
event.stopPropagation()语句。这将阻止点击事件向上层元素传播，从而阻止Modal的关闭事件。 - 示例代码：
- 示例代码：
- 在按钮的点击事件处理程序中，添加
- 方法二：使用data-dismiss属性来指定不关闭Modal。
- 在需要保留Modal打开状态的按钮上，添加
data-dismiss="modal"属性。 - 示例代码：
- 示例代码：
- 注意：以上方法仅适用于Bootstrap Modal，如果使用其他Modal插件或自定义的Modal，可能需要根据具体情况进行相应的处理。
- 在需要保留Modal打开状态的按钮上，添加
关于Bootstrap Modal的更多信息，可以参考腾讯云提供的相关文档和产品：
相关·内容
我实现了一个带有5个按钮的表单模型:提交，2个关闭按钮，还有2个用于输入数字微调的按钮，允许用户使用"+“和"-”按钮选择数量。问题是，每次单击"+“或"-”按钮时，模式都会关闭，这是按下提交或关闭按钮时模式的正常行为，但我需要模式保持可见，并允许用户在没有关闭模式的情况下选择数量。以下是窗体中用于控制数字
浏览 21提问于2020-07-26得票数 0
4回答
我正在进行javascript验证，点击Add_click();中的Add按钮，并提醒用户注意All fields are mandatory。点击Alert后，Modal窗口就会关闭。<div id="modalUserAddition" class="modal fade">
浏览 7提问于2015-01-09得票数 2
回答已采纳
1回答
有人知道在Bootstrap下拉菜单中添加标签的简单方法吗？现在的问题是，当我打开下拉菜单并单击任何选项卡时，下拉菜单关闭。这是任何下拉菜单的预期行为。如何避免关闭下拉列表，如果单击位于下拉列表内部，则仅在外部单击或按钮单击时将其关闭。
谢谢!
浏览 3提问于2013-01-23得票数 2
2回答
自举模态数据不工作
、、、、
因此，data-dismiss="modal"并不适用于在我的HTML中添加的按钮，而是用于通过JS插入按钮HTML添加到模式中的按钮。这让我觉得添加脚本标记的位置/顺序有问题。我的脚本标记按以下顺序排列：<script src="/Scripts/bootst
浏览 1提问于2014-11-13得票数 7
在我的asp页面中，我有以下内容：<div class="modal-dialog">
<asp:UpdatePanel ID=&
浏览 0提问于2016-07-15得票数 1
我正在一个项目中使用bootstrap 5。我正在构建一个测验，当您单击按钮时将打开该测验。测验显示在bootstrap 5模式组件中。我的问题是，当你点击模式的关闭按钮，然后重新启动它时，上一轮测验的数据仍然在那里(单选按钮仍然被选中)。我想要关闭按钮来销毁模式，并处理所有以前的数据。我已经尝试了几种方法(分别)，如下所述： myModal.dispose()
myModal.<
浏览 83提问于2020-12-29得票数 1
我试图关闭/隐藏bootstrap5模式，使用JavaScript的角度，问题是引导中的隐藏函数在某种程度上不起作用，所以我想要做的是点击一个有数据的按钮--bs-close，如果我手动点击它，它就会工作="true" <div class="modal-dialog" role="document">
&l
浏览 0提问于2021-05-29得票数 1
7回答
引导模式弹出不关闭
、、、、
我在使用引导模式弹出时有问题。调用弹出是没有问题的，但试图关闭它会产生奇怪的结果。而不是仅仅隐藏弹出和删除背景，弹出式窗口被隐藏，但另一个背景被添加，使屏幕几乎变成黑色。原始背景不会被移除。下面是我尝试使用的html代码 <div class="modal-headermoda-body">
浏览 3提问于2013-08-27得票数 2
回答已采纳
我试图在窗体的右上角创建一个关闭图标。它会关闭表单，但当我在没有重新加载的情况下重新打开页面时，所有数据字段都会显示数据。<ul class="nav navbar-nav navbar-right">
<li id="myBtn"><a href="#">RegisterWi
浏览 3提问于2017-01-20得票数 0
5回答
我正在处理bootstrap模式，当模式打开时，它有两个按钮，一个用于打印模式内容，第二个用于关闭模式。aspx页面中模式的代码： <div class="modal-dialog modal-lg">
<div class="
浏览 0提问于2016-12-26得票数 1
3回答
但是当单击upload时，我想要上传图像，然后关闭模式窗口。当我在按钮中使用data-dismiss="modal"作为属性时，它只是关闭窗口而不做任何其他事情。所以我找到了一些方法来关闭它，但是一切都是在Jquery的帮助下完成的，例如：$('#my-modal').modal('hide');，但是我正在使用angular并尝试
浏览 0提问于2014-12-14得票数 2
回答已采纳
1回答
btn-primary btn-submit">Submit</button> </div> </div>因此，当我第一次在控制台中单击Submit时，我看到clicked记录了一次，但是，当我关闭该模式时，再次打开它并再次单击Submit，我看到clicked记录了三次而不
浏览 5提问于2021-05-18得票数 1
回答已采纳
1回答
当前，弹出窗口正在正确地加载“是”、“否”按钮。如果用户单击“是”按钮，我需要保存数据，如果单击“否”，则需要关闭弹出窗口。请查查我的档案。我的模态function SaveConfirmationModal(props) { </div>}
export default SaveCo
浏览 2提问于2021-03-22得票数 0
回答已采纳
Bootstrap模式在bootstrap版本4上工作得很好，但当我更改为使用bootstrap版本5时，当我单击“关闭”按钮时，模式无法关闭。//当我使用此v4时，modal可以完美地工作： <script src="assets/vendor/bootstrap-4.1.3-dist/js&#x
浏览 16提问于2021-09-29得票数 0
1回答
我正在一个使用引导框架的项目中工作，我看到了打开一个模态窗口的不同方法，在我的例子中，我用javascript打开它，并使用以下代码：我这样做是因为客户要求我在单击“外部”时避免关闭该模式，但现在他希望按下“外部单击”，然后再次关闭该模式，但当在我的窗口中没有特定<
浏览 0提问于2017-09-11得票数 0
回答已采纳
我正在尝试在React中使用Bootstrap模式。我已经成功地打开了一个模式。为了以编程方式关闭模式，我使用了下面的代码。$('#exampleModal').modal('hide') 代码是在按钮的onClick事件中编写的。当我单击该按钮时，会出现错误Unhandled Rejection (TypeError): jquery__WEBPACK_IMPORTED_MODULE_6___default(.
浏览 17提问于2021-09-15得票数 0
回答已采纳
我有一个按钮，可以激活鼠标悬停在dropzone中的模式，当我通过单击退出模式时(而不是转义--转义总是有效的)，无论我在哪里单击，容纳该按钮的dropzone都会激活文件资源管理器。模式是使用react-modal (而不是bootstrap)创建的，并且html为： isOpen={props.state.show}
onRequestClose=</Modal&g
浏览 1提问于2018-03-22得票数 0
我试图获得一个引导3模态形式来触发form.submit()在jQuery，但无论我尝试什么，我不能让它启动。<div class="modal fade" id="modal-signup" tabindex="-1" role="dialog" aria-labelledby="modal-signup"aria-hidden="true">
<div class="<
浏览 2提问于2015-01-08得票数 2
回答已采纳
2回答
yii2引导模式隐藏显示
、、、、
我使用yii2 bootstrap模型来显示一些数据，bootstrap模型通过两种方式接近，2)点击背景中出现的像灯箱一样的黑色区域。我已经处理了close按钮事件，但无法处理那个黑色区域单击事件。我不想在单击黑色区域时关闭模型，how how do that.Please help me。提前谢谢。<?php &
浏览 5提问于2015-04-24得票数 4
回答已采纳
在一个页面中，我使用不同的按钮调用Bootstrap模式两次。一个按钮显示允许通过单击任意位置关闭的模式，而另一个按钮只能通过单击close或X按钮关闭。但是如果我首先单击任意位置按钮，那么第二个按钮也可以通过单击任意位置来关闭。
如果我先单击close by click close按钮，那么
浏览 0提问于2017-06-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
