bootstrap模态框保存后清除模态框数据的方法

于 2022-04-08 22:16:50 发布
阅读量1.4k 收藏 4
点赞数 1
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brooker_/article/details/124052300
版权

代码如下，前面是模态框的一些常用设置，最后是解决方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		  增加用户
		</button>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">增加用户</h4>
		      </div>
		      <div class="modal-body">
		        <div class="container-fluid">
					<form class="form-horizontal">
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-10">
							  <input type="text" class="form-control" id="name" placeholder="请输入姓名">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10">
							  <input type="email" class="form-control" id="name" placeholder="请输入邮箱">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10">
							  <input type="email" class="form-control" id="name" placeholder="请输入邮箱">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10">
							  <input type="email" class="form-control" id="name" placeholder="请输入邮箱">
							</div>
						</div>
					</form>
					
				</div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default footer-btn" data-dismiss="modal">取 消</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal">保 存</button>
		      </div>
		    </div>
		  </div>
		</div>

		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" 
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" 
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
		<script>
			$('body').on('hidden.bs.modal', function () {
			  // 踩过的坑555...
			  // $('.modal').modal('hide')		
			  // $(this).removeData('bs.modal');
			  // $(this).find('.modal-body').empty();
			  // $('.modal-body').html("")
			  // 找到 modal-body下面的form表单，并且重置
			  $('.modal-body').find('form').trigger('reset');
			});
		</script>
	</body>
</html>
MC_kanon
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap模态框里 再弹模态框
zxueli54321的博客
09-23 801
Bootstrap模态框里 再弹模态框后端代码点击编辑 按钮 将参数赋值隐藏 input 中 , 便于修改 获取对应id修改模态框详情模态框 后端代码 /** * 财务审核使用详情 * * @param request * @param id * @return */ @RequestMapping(params = "getUseDatil") @ResponseBody public JSONArray getUse
解决bootstrap模态框数据缓存的问题方法
10-18
今天小编就为大家分享一篇解决bootstrap模态框数据缓存的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap 清空模态框方法
Java 璐到底
03-19 1060
$(function () { $('#productDescribeModal').on('hide.bs.modal', function () { //清空模态框内容 $("#ys").html('') }) }); ys 是你要清空容器的id
bootstrap模态窗口取消bootstrap-table数据清空了
feixiang_01171的专栏
07-06 558
弹出提示的模态窗口，点击关闭后，boostrap-table的数据被清空了，需要重新绑定一下bootstrap-table中的数据。
模态框关闭后清空模态框里填写的数据（补充vue.form清空）
gaojun15173的博客
08-14 2万+
问题描述：用户充值功能，使用模态框填写充值信息。充值确定后，第二次打开模态框里面展示的是上一次填写的信息。(vue部分在下面) 网上搜索了清空模态框的方法，如下这种。试了 没用！不好使！好气哦！ $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });...
python测试开发django-121.bootstrap-table弹出模态框修表格数据提交
qq_27371025的博客
09-13 1196
前言 bootstrap-table勾选需要修改的表格内容，点修改按钮 弹出模态框修改表格数据后ajax提交请求 模态框的html内容 整个body内容如下,模态框设置id属性id=“myModal” 修改按钮的id属性id=“btn_edit” # 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ <body> <div class="container"> <h1>b
bootstrap模态框清理缓存数据
lime_的博客
05-16 2263
在bootstrap模态框中有form及其他相关生态组件时会有很多坑需要规避。 在点击关闭后不会清理缓存数据。 bootstrap-select组件在清理选项后，ui还是不会更新。 下面我提供了一个工具类供大家参考，因为在网上搜索了好久都没找到好的解决方法，只能自己写了。 function removemodaldata(){ $('body').on('hidden.bs.modal...
bootstrap模态框关闭后清除模态框的数据方法
10-18
今天小编就为大家分享一篇bootstrap模态框关闭后清除模态框的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
为了实现Bootstrap模态框的水平垂直居中显示，我们可以采用以下两种方法： 方法1： 这种方法依赖于JavaScript事件监听器，特别是`shown.bs.modal`事件，该事件在模态框展示完成后触发。我们可以在这个事件的回调...
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
11-30
总的来说，理解Bootstrap模态框的工作机制，检查页面跳转后的DOM变化，以及正确处理模态框的生命周期事件，是解决此类问题的关键。通过这种方式，可以确保模态框在页面跳转后能正确关闭，避免背景层残留造成的问题。
模态框数据清空
weixin_44575964的博客
03-24 333
addThemeForm是模态框中form表单的id $("#addThemeForm")[0].reset();
bootstrap中模拟模态框和进度条动态删除数据
且行且珍惜
09-01 2435
本文是介绍用bootstrap的模态框和进度条动态展示操作 1：完成基本的布局     基本的表格布局                         id：             邮箱：             密码：             操作：                         @foreach (var item in Model)
Vue组件数据重置/清空；模态框数据重置问题
qq_45327886的博客
11-09 8751
模态框数据重置问题
bootstrap模态框关闭后清除模态框的数据
lxw1844912514的博客
04-22 7814
https://segmentfault.com/q/1010000008789123 bootstrap模态框第二次打开时如何清除之前的数据？ 我用了bootstrap模态框的remote功能，在弹出模态框时动态加载界面，但是当打开过一个模态框后，打开其他的模态框，数据不会刷新，还是保留原来的。 如图所示 用这个方法也不行 请问该怎么做才能清空之前的数据 ...
bootstrap清空模态框
cocosun
09-23 1919
js代码： /** * 清空相册模态框 */ $('#mymodal').on('hidden.bs.modal', function() { document.getElementById("modalform").reset(); }) html页面代码： <div class="modal fade" id="mymodal"> <div clas...
bootstrapTable清空search框内容并刷新页面
Jalen备忘录
06-30 1461
let tableNode = $("#tableSelector"); tableNode.bootstrapTable("resetSearch",""); tableNode.bootstrapTable('refresh'); 参考： https://github.com/wenzhixin/bootstrap-table/issues/1230 https://stackoverflow.com/questions/53177296/clear-filter-values-in-boots.
BootstrapTable本地添加、删除、修改数据
duansamve的博客
04-29 1万+
BootstrapTable本地添加、删除、修改数据
bootstrap modal 弹窗 数据清除
热门推荐
码农札记
09-24 3万+
bootstrap modal操作简单易用， 但是发现当用于弹出不同的编辑页面时，数据总是显示第一次的数据， 查了好久是这样的： //清除弹窗原数据 $("#create_modal").on("hidden.bs.modal", function() { $(this).removeData("bs.modal"); }); 另附上modal一些触发函数 事
bootstrap模态框
最新发布
08-03
引用[1]、[2]和[3]提供了关于Bootstrap模态框的三个示例。Bootstrap模态框是一种常用的弹出窗口组件，用于在网页中显示临时的内容或交互。模态框通常包含一个标题、内容和底部按钮。用户可以通过点击按钮或链接来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值