您好,欢迎来到养宠指南。
搜索
您的当前位置:首页

Bootstrap模态框多次弹出提交BUG

2022-06-15 来源:养宠指南
摘要
提交重复数据?你是没将提交的参数清空再赋值吗?(这不太可能吧)还是你的意思是显示的数据会出现重复数据?看不到你显示数据的方法,但我猜你应该是没对之前的内容清空就直接添加了新的内容导致的,并不是“提交重复数据”的原因,你只要在显示内容之前清空一次你的显示表格就行了

这次给大家带来Bootstrap模态框多次弹出提交BUG,Bootstrap模态框多次弹出提交BUG的注意事项有哪些,下面就是实战案例,一起来看一下。

模态框

Bootstrap Modal

Bootstrap 的模态框使用Bootstrap 的前端应该都接触过。

本文记录一下今天使用时遇到的 BUG,以便以后查阅和帮助其他遇到同样问题的伙伴们。

BUG 情景

使用场景

触发展现模态框,填写对应的信息,然后 ajax 提交表单信息到后台。

简化

点击下面的按钮一次,弹出模态框。点击提交,会直接 alert("提交") 。点击一次会觉得很正常,但是如果你重复点几次模态框,会发现再次点击 提交 ,alert 会出现多次。

【相关视频推荐:Bootstrap教程】

简书无法展现效果,可参见

代码如下:

<button class="btn btn-info" id="modal-click-error">点击弹出模态框</button><p class="modal" tabindex="-1" role="dialog" id="myModal"> <p class="modal-dialog" role="document"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </p> <p class="modal-body"> <p>One fine body…</p> </p> <p class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">提交</button> </p> </p><!-- /.modal-content --> </p><!-- /.modal-dialog --></p><!-- /.modal -->$(function() { $('#modal-click-error').on('click', function() { $('#myModal').modal('show'); $("#myModal .btn-primary").on('click', function() { alert("提交"); }); }); });

问题修复

上述的 js 代码,每次对于按钮的点击都会为提交按钮添加对应事件。修改如下即可:

$(function() { $('#modal-click-error').on('click', function() { $('#myModal').modal('show'); }); $("#myModal .btn-primary").on('click', function() { alert("提交"); }); });

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

AngularJS实现计算价格功能

vue-cli怎么配置lib-flexible+rem移动端自适应

小编还为您整理了以下内容,可能对您也有帮助:

bootstrap中模态框提交表单成功后,如果不对网页进行刷新,当再次提交表单时会提交重复数据,求解决

提交重复数据?你是没将提交的参数清空再赋值吗?(这不太可能吧)

还是你的意思是显示的数据会出现重复数据?看不到你显示数据的方法,但我猜你应该是没对之前的内容清空就直接添加了新的内容导致的,并不是“提交重复数据”的原因,你只要在显示内容之前清空一次你的显示表格就行了

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

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

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

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

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

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

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

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

懂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[exe],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博客[引用时间2018-1-9]

bootstrap的modal弹出框可以通过什么方式屏蔽

bootstrap的modal通过按钮标签的data-target属性来选择显示哪个模态框,因此可以在加载完html之后,把所有button标签的data-target值设置为0,代码如下:

$(function(){

$(button).each(function(i,item){

item.attr("data-target","");

})

})

养宠指南还为您提供以下相关内容希望对您有帮助:

bootstrap 在模态窗口中呈现内容,验证不通过弹出提示框,原本模态框有的...

因为你这个是两层模态框,bootstrap中有说明的,模态框最好不要嵌套,会出现bug的。

bootstrap 模态框JS报错

升级JQ到最新版本,你用的版本有这个BUG。http://stackoverflow.com/questions/27965397/error-inside-jquery-validate-js-javascript-runtime-error-unable-to-get-propert# 上面也是一样的问题。

bootstrap如何弹出窗口bootstrap弹出页面窗口

当自举模态框弹出时,被遮罩层遮挡。解决方案是:1.打开WebStorm开发工具,新建一个“test.html”文件,在该文件的同级目录下安装部署Bootstrap相关文件。目录结构如下图所示。2.在“test.html”中编写以下代码。3.网页查看效...

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

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

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

bootstrap 模态框弹出时被遮罩层挡住了是设置错误造成的,解决方法为:1、打开WebStorm开发工具,新建‘test.html’文件,并在文件同级目录安装部署Bootstrap相关文件,目录结构如下图。2、在‘test.html’中写如下代码。3、...

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

建立模态对话框 1.选择File/New/MFC AppWizard[exe],Project name为Test,单击OK.2.选择Single document,单击Finish.3.选择左侧Workspace/ResourceView,在Dialog上单击右键,选择Insert Dialog,默认名字为IDD_DIALOG1.4.双击右侧...

如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框_javascr...

调用bootstrap的modal初始化的时候当然不能立即显示弹框,所以也不能配置为true;backdrop配置为false的原因在下一点介绍。2)遮罩处理如果启用bootstrap的遮罩,会发现在点击遮罩部分的时候,弹框就会自动关掉了,这不是我期望的虚拟模态效果,...

php+bootstrap3利用模态框提交表单,测试发现提交不过去值

input 元素没有name ,所以数据就算提过去了,你也取不到

如何在bootstrap模态框弹出后触发函数

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。事件类型 描述 show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的 元素,则此元素可以通过事件的relatedTarget 属性进行...

bootstrap3 最新版本 模态对话框以及其它插件失效问题

你使用 文件引入 的那个地方出错了 不要 hide 那个类,因为hide 在这里是隐藏,所以你就看不到模态框..

上一篇:Webpack如何构建Electron应用

下一篇:Angular实现可添加删除与计算总金额效果插件

Top