模态框记录学习使用

最新推荐文章于 2024-05-22 08:00:00 发布
最新推荐文章于 2024-05-22 08:00:00 发布
阅读量238 收藏
点赞数
文章标签： javascript html
汤圆
本文链接：https://blog.csdn.net/sqL520lT/article/details/110471216
版权

模态框基于html 原生js 实现的模态框

这是js请求

    <script>
		//给导入按钮添加导入模态框表单
		function modelView(data) {
			var id = data;
			//弹出模态框
			$("#importModal").modal("show");
			$.ajax({
				url:"/rest/selectMediaById",
				data:{id:id},
				type:"POST",
				dataType:"json",
				success:function (data) {
					$("#audioUrl").attr("src" , data.audioUrl);

				}
			});
		}
    </script>

模态框显示

 <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		 <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">
				这是模态框显示视频  	 <video id="avUrl" src="" controls="autoplay" loop="loop" width="200px" height="200px"></video>
				这是模态框显示图片  		 <img id="mailAurl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>

				 </div>

			 </div>
		 </div>
	 </div>

这个是点击事件

		{
					field : 'avUrl', 
					title : '视频的路径',
					sortable: false,
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="#" οnclick="modelView('+row.id+')">查看视频</a> ');
                        return actions.join('');
                    }

				},

这个是读取后台接口的字段显示

	//给导入按钮添加导入模态框表单
		function modelView1(data) {
			console.log('点击了')
			var id = data;
			//弹出模态框
			$("#importModal1").modal("show");
			$.ajax({
				url:"/rest/selectMailById",
				data:{id:id},
				type:"POST",
				dataType:"json",
				success:function (data) {
					// console.log(document.querySelector("#legalDeputy"),document.querySelector("#legalDeputy").value)
					document.querySelector("#legalDeputy").value=data.legalDeputy
					document.querySelector("#legalId").value=data.legalId
					document.querySelector("#bankCard").value=data.bankCard

					// $("#legalDeputy").attr("src" , data.legalDeputy);
					// $("#legalId").attr("src" , data.legalId);
					// $("#bankCard").attr("src" , data.bankCard);
					// console.log(data)
					// console.log(data.bankCard)

				}
			});
		}

效果图:
在这里插入图片描述

另一个博主的模态框

地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="JSmin/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css" />
	</head>
	<body>
		<!-- data-toggle指以什么事件触发，常用的如collapse,modal,popover,tooltips等；
data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示。 -->
		<h1>模态弹出框</h1>
		<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal" data-backdrop="static">点击我会弹出模态框</button>
		
		<a href="#mymodal" data-toggle="modal" class="btn btn-primary">点击我这个链接也会弹出模态框</a>
		
		<button class="btn btn-primary" id="btn-js">单击我会利用JS来弹出模态弹出框</button>

		<div class="modal fade" id="mymodal">
		<!-- modal-dialog水平居中 -->
			<div class="modal-dialog modal-sm">
				<div class="modal-content ">
					<div class="modal-header">
						<!-- 给一个元素data-dimiss属性的话，可以通过点击该元素达到让目标消失的效果。 -->
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span>
							<span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">模态弹出窗标题</h4>
					</div>
					<div class="modal-body">
						<p>模态弹出窗主体内容</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">关闭</button>
						<button class="btn btn-primary" data-dismiss="modal">保存</button>
					</div>
				</div>
			</div>
		</div>


		<script type="text/javascript">
			$('#btn-js').click(function() {
				$('#mymodal').modal({
					backdrop: "static"
					//等同于data-backdrop，如果设置为true，则单击该背景时，
					//模态弹出窗会关闭；如果设置为false，则单击该背景时，
					//模态弹出窗不会关闭
				})
			})
		</script>	
	</body>
</html>



<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">

	<style>
		*{
			margin:0;
			padding:0;
		}
		#model{
			width:500px;
			height:300px;
			margin-left:-250px;
			margin-top:-150px;
			background-color: blue;
			position:fixed;
			top:50%;
			left:50%;
			z-index: 200;
		}
		#outer{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			z-index:100;
			padding-top:10%;
			text-align:center;
			background-repeat:no-repeat;
			background-position:center center;
			background-color:#000;
			background-color:rgba(0,0,0,0.5);
			filter:alpha(opacity=50);
			display: none;
		}
	</style>
</head>
<body class="gray-bg">
    
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
<!--							<li>-->
<!--								行业id：<input type="text" name="industryId" />-->
<!--							</li>-->

							<li>
								店铺名称：<input type="text" name="name"/>
							</li>

<!--							<li>-->
<!--								行业属性：<input type="text" name="property"/>-->
<!--							</li>-->

							<li>
								营业执照法人代表：<input type="text" name="legalDeputy"/>
							</li>

<!--							<li>-->
<!--								法人身份证信息：<input type="text" name="legalId"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								银行卡号：<input type="text" name="bankCard"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺照片：<input type="text" name="mailPhoto"/>-->
<!--							</li>-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								logo图片：<input type="text" name="titleLogo"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								大标题：<input type="text" name="bigTitle"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								小标题：<input type="text" name="smallTitle"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								海报：<input type="text" name="poster"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								销售量：<input type="text" name="saleAmount"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--							<li>-->
<!--								店铺区地址：<input type="text" name="mailArea"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺资质图片1.：<input type="text" name="mailUrl"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺资质2.：<input type="text" name="mailAurl"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺资质3.：<input type="text" name="mailBurl"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺资质4.：<input type="text" name="mailCurl"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺资质5.：<input type="text" name="mailDurl"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺资质6：<input type="text" name="mailEurl"/>-->
<!--							</li>-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								用户id：<input type="text" name="userId"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								创建人：<input type="text" name="createId"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								创建时间：<input type="text" name="createDate"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								修改人：<input type="text" name="updateId"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								修改时间：<input type="text" name="updateDate"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--							<li>-->
<!--								状态：<input type="text" name="status"/>-->
<!--							</li>-->

<!--&lt;!&ndash;							<li>&ndash;&gt;-->
<!--&lt;!&ndash;								分销员id  分销员跟店铺绑定：<input type="text" name="incomeId"/>&ndash;&gt;-->
<!--&lt;!&ndash;							</li>&ndash;&gt;-->

<!--							<li>-->
<!--								店铺联系电话：<input type="text" name="phone"/>-->
<!--							</li>-->

<!--							<li>-->
<!--								店铺详细地址：<input type="text" name="mailDetail"/>-->
<!--							</li>-->

							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>


			<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:mail:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="system:mail:edit">
					<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:mail:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:mail:export">
						<i class="fa fa-download"></i> 导出
				 </a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
<!--		 <div style="color:red;font-size: 20px;position: absolute;bottom: 40px;left: 40%">-->
<!--			 顺优+温馨提示:上传店铺;不能有空哟！顺优棒棒哒！！！-->
<!--		 </div>-->
	</div>

    <div th:include="include :: footer"></div>
	 <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		 <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>
				  <center><strong><span style="font-size: 24px">店铺资质图</span> </strong></center>
				 <div class="modal-body">
<!--					 <video id="avUrl" src="" controls="autoplay" loop="loop" width="200px" height="200px"></video>-->
<!--					 <video id="avUrl" src="" controls="autoplay" loop="loop" width="200px" height="200px"></video>-->

					 <img id="mailUrl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>
					 <br/>
					 <br/>
					 <br/>
					 <br/>
					 <img id="mailAurl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>
					 <br/>
					 <br/>
					 <br/>
					 <br/>
					 <img id="mailBurl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>
					 <br/>
					 <br/>
					 <br/>
					 <br/>
					 <img id="mailCurl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>
					 <br/>
					 <br/>
					 <br/>
					 <br/>
					 <img id="mailDurl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>
					 <br/>
					 <br/>
					 <br/>
					 <br/>
					 <img id="mailEurl" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 160px"></img>
				 </div>

			 </div>
		 </div>
	 </div>
<!-- 店主信息模态框-->
	 <div class="modal fade" id="importModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
		 <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="myModalLabel1">店主相关信息</h4>
				 </div>
				 <center><strong><span style="font-size: 24px">店主信息</span> </strong></center>
				 <div class="modal-body">
					 <span class="btn btn-info btn-xs" style="margin-left: 180px" >营业执照法人代表</span>:<textarea id="legalDeputy" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 180px"></textarea><br/><br/>
					 <span class="btn btn-success btn-xs" style="margin-left: 180px">法人代表的身份证</span>: <textarea id="legalId" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 180px"></textarea><br/><br/>
					 <span class="btn btn-danger btn-xs" style="margin-left: 180px">法人代表银行卡号</span>:<textarea id="bankCard" src="" controls="autoplay" loop="loop" width="200px" height="200px" style="margin-left: 180px"></textarea><br/><br/>
				 </div>

			 </div>
		 </div>
	 </div>




    <script th:inline="javascript">

        var editFlag = [[${@permission.hasPermi('system:mail:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:mail:remove')}]];
        var prefix = ctx + "system/mail";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
				frozenUrl : prefix+"/frozen",
                mailAdoptUrl : prefix+"/mailAdopt",
                mailRejectUrl : prefix+"/mailReject",
                modalName: "店铺",
				search: false,
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '编号',
					visible: false
				},
				// {
				// 	field : 'industryId',
				// 	title : '行业id',
				// 	sortable: true
				// },
				{
					field : 'name', 
					title : '店铺名称',
					sortable: true
				},
					{
						field : 'titleLogo',
						title : 'logo图片',
						sortable: true,
						formatter: function (value, row, index) {
							return statusToolsOne(row);
						}
					},
					{
						field : 'secretKey',
						title : '店铺密钥',
						sortable: true
					},
				{
					field : 'property', 
					title : '行业属性',
					sortable: true
				},
				{
					field : 'mailPhoto', 
					title : '店铺照片',
					sortable: true,
					formatter: function (value, row, index) {
						return statusTools(row);
					}
				},
					// {
					// 	field : 'legalDeputy',
					// 	title : '营业执照法人代表',
					// 	sortable: true
					// },
					// {
					// 	field : 'legalId',
					// 	title : '法人身份证信息',
					// 	sortable: true
					// },
					// {
					// 	field : 'bankCard',
					// 	title : '银行卡号',
					// 	sortable: true
					// },
				{
					field : 'bigTitle', 
					title : '大标题',
					sortable: true
				},
				{
					field : 'smallTitle', 
					title : '小标题',
					sortable: true
				},
				// {
				// 	field : 'poster',
				// 	title : '海报',
				// 	sortable: true
				// },
				{
					field : 'saleAmount', 
					title : '销售量',
					sortable: true
				},
				{
					field : 'mailArea', 
					title : '店铺区地址',
					sortable: true
				},
				// {
				// 	field : 'mailUrl',
				// 	title : '店铺资质图片No1',
				// 	sortable: true
				// },
				// {
				// 	field : 'mailAurl',
				// 	title : '店铺资质A',
				// 	sortable: true
				// },
				// {
				// 	field : 'mailBurl',
				// 	title : '店铺资质B',
				// 	sortable: true
				// },
				// {
				// 	field : 'mailCurl',
				// 	title : '店铺资质C',
				// 	sortable: true
				// },
				// {
				// 	field : 'mailDurl',
				// 	title : '店铺资质D',
				// 	sortable: true
				// },
				// {
				// 	field : 'mailEurl',
				// 	title : '店铺资质E',
				// 	sortable: true
				// },

				{
					field : 'status', 
					title : '状态',
                    formatter: function(value, item, index) {
                        if (item.status == '0') {
                            return '<span class="label label-success">待审核</span>';
                        }
                        else if (item.status == '1') {
                            return '<span class="label label-primary">通过</span>';
                        }
                        else if (item.status == '2') {
                            return '<span class="label label-yellow">驳回</span>';
                        }
                        else if (item.status == '3') {
                            return '<span class="label label-white">冻结</span>';
                        }
                    }
				},
				{
					field : 'phone', 
					title : '店铺联系电话',
					sortable: true
				},
				{
					field : 'mailDetail', 
					title : '店铺详细地址',
					sortable: true
				},
					{
						field : 'mailBothImg',
						title : '店铺的资质图',
						sortable: true,
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs" href="#" οnclick="modelView('+row.id+')">查看资质图</a> ');
							return actions.join('');
						}

					},

					{
						field : 'userInformation',
						title : '查看店主信息',
						sortable: true,
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs" href="#" οnclick="modelView1('+row.id+')">查看店主信息</a> ');
							return actions.join('');
						}

					},




					{
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" οnclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
						actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.frozen(\'' + row.id + '\')"><i class="fa fa-remove"></i>冻结</a>');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.mailAdopt(\'' + row.id + '\')"><i class="fa fa-remove"></i>通过</a>');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.mailReject(\'' + row.id + '\')"><i class="fa fa-remove"></i>驳回</a>');
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);
        });


		/* 图像显示 */
		function statusTools(row) {
			if (row.mailPhoto != null) {
				return '<img style="width: 70%;" src="'+row.mailPhoto+'"></img> ';
			} else {
				return '<span> - </span>';
			}
		}
		/* 图像显示 */
		function statusToolsOne(row) {
			if (row.titleLogo != null) {
				return '<img style="width: 70%;" src="'+row.titleLogo+'"></img> ';
			} else {
				return '<span> - </span>';
			}
		}


		//给导入按钮添加导入模态框表单
		function modelView(data) {
			var id = data;
			//弹出模态框
			$("#importModal").modal("show");
			$.ajax({
				url:"/rest/selectMailById",
				data:{id:id},
				type:"POST",
				dataType:"json",
				success:function (data) {
					$("#mailUrl").attr("src" , data.mailUrl);
					$("#mailAurl").attr("src" , data.mailAurl);
					$("#mailBurl").attr("src" , data.mailBurl);
					$("#mailCurl").attr("src" , data.mailCurl);
					$("#mailDurl").attr("src" , data.mailDurl);
					$("#mailEurl").attr("src" , data.mailEurl);
					log.log(data)
					log.log(data.mailAurl)
				}
			});
		}


		//给导入按钮添加导入模态框表单
		function modelView1(data) {
			console.log('点击了')
			var id = data;
			//弹出模态框
			$("#importModal1").modal("show");
			$.ajax({
				url:"/rest/selectMailById",
				data:{id:id},
				type:"POST",
				dataType:"json",
				success:function (data) {
					// console.log(document.querySelector("#legalDeputy"),document.querySelector("#legalDeputy").value)
					document.querySelector("#legalDeputy").value=data.legalDeputy
					document.querySelector("#legalId").value=data.legalId
					document.querySelector("#bankCard").value=data.bankCard

					// $("#legalDeputy").attr("src" , data.legalDeputy);
					// $("#legalId").attr("src" , data.legalId);
					// $("#bankCard").attr("src" , data.bankCard);
					// console.log(data)
					// console.log(data.bankCard)

				}
			});
		}
    </script>



</body>
</html>
是汤圆丫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JS 可拖动模态框.zip
08-04
在本"JS可拖动模态框.zip"压缩包中，包含了一个使用JavaScript实现的可拖动模态框的实例。模态框（Modal Box）是一种常见的用户界面元素，它会在当前页面上显示一个弹出窗口，使得用户必须与其交互后才能继续浏览...
模态框
weixin_34191734的博客
08-06 76
模态框：<divclass="modalfade"tabindex="-1"role="dialog"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><...
bootstrap 模态框（modal）
weixin_42491847的博客
10-19 324
模态框小案例
用Vue3.0 想实现一个 Modal组件（详细讲解）
最新发布
贫僧法号依平
05-22 1488
现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。
Bootstrap模态框Bug(modal fade引起的bug)
笔落墨成&博客
01-03 1660
记录一个Bootstrap模态框Bug(modal fade引起的bug) 先放代码 <div class="modal fade" tabindex="-1" role="dialog"> </div> 当我使用上面这段代码作为弹窗遮罩层的时候，这个遮罩层只是一个等待遮罩，在ajax完成后会取消(取消由ajax完成控制)。 在我连续按下回车触发submit事件的时候，ajax也被连续触发了，这个时候由于间隔事件太短，会导致模态框被关闭后，遮罩层还在！ 最后删除fade样式就可以了
Bootstrap模态框嵌模态框(多层模态框)的实现
gyueh的博客
11-27 1724
以下实例用于创建多层模态框的嵌套效果: 1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download) 2.在页面内head标签内引入样式库bootstrap.min.css 3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js， 例如： <head> <meta ...
Bootstrap系列之模态框（Modal）
老__L的博客
06-16 1万+
模态框（Modal）
bootstrapTable-model模态框可拖动代码.zip
12-06
总之，理解和应用这个“bootstrapTable-model模态框可拖动代码”不仅可以让你掌握如何增强BootstrapTable模态框的功能，还能深入学习到JavaScript事件处理、DOM操作和CSS布局等核心Web开发技术。
Bootstrap模态窗口源码解析
08-31
此外，`Modal` 还处理了远程数据加载的情况，通过`$.load()` 函数将远端数据填充到模态框中，并在加载完成后触发`loaded.bs.modal`事件。 `Modal` 类中定义了一些关键属性和方法： 1. `MODAL_TRANSITION_DURATION`...
jQuery模态窗留言板
06-01
此外，实现窗口的拖动功能，可能使用`mousedown`、`mousemove`和`mouseup`事件，记录初始位置，然后根据鼠标移动更新窗口位置。 `php中文网免费下载站.txt`和`php中文网下载站.url`可能是提供资源下载的相关信息，...
iview后台框架
03-13
iView是基于Vue.js设计的高质量UI组件库，它提供了丰富的组件，如表格、按钮、提示、模态框、轮播图等，这些组件设计精美，功能完善，易于使用，能够快速提升项目的视觉效果和用户体验。 在这个【iview后台框架】中...
bootstrap实现嵌套模态框的实例代码
10-15
主要介绍了bootstrap实现嵌套模态框的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
bootstrap嵌套模态框完美解决
sdad2154的博客
11-29 526
本身官网不支持嵌套 但是可以弹出两个模态框 后者会在html上覆盖前者 这样每次都可以操作自己的模态框了。
bootstrap模态框嵌套问题
qq_41157351的博客
12-23 594
bootstrap模态框嵌套问题
关于bootstrap中两个模态框嵌套的问题
qq_42283150的博客
06-26 2351
在bootstrap中如果存在两个模态框先后弹出时,就会出现一些问题,比如关闭最上层模态框时,会发现下一层的那个模态框无法滚动,这时候你滚动的会是body页面的内容,通过查阅得知可以在关闭位置添加如下代码 $("#myModal").on("hidden.bs.modal", function () { if ($('.modal.in').size() >= 1) { ...
bootstrap多层模态框嵌套问题
博客
03-04 2995
在使用Bootstrap中模态框过程中，如果出现多层嵌套的时候，如打开模态框A，然后在A中打开模态框B，在关闭B之后，如果A的内容比较多，滚动条会消失，而变为Body的滚动条，这是由于模态框自带的遮罩的问题。网上有朋友给出的解决方案是在A增加overflow:auto的方法解决，但是这种方法会使得页面出现两个滚动条。 原因是由于遮罩造成的，那么可以重新增加遮罩，即在关闭B之后，重新给body增加遮...
Bootstrap多层模态框如何嵌套？
热门推荐
小春的博客
05-11 2万+
我希望，首先打开模态框1，然后打开模态框2，然后关闭模态框2，然后关闭模态框1. 但是我发现打开模态框1再打开模态框2的时候，模态框2被模态框1压住了，我希望模态框2压住模态框1. 于是不会了~求教 我知道bootstap是不支持多层模态框，但是还是希望完成这个功能，请知道答案的人回答一下谢谢！ 提问者采纳 使用js去弹出第二个模态框 其一：DOCTYPE html>
bootstrap实现嵌套模态框
weixin_45397941的博客
01-08 679
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Bootstrap多层模态框modal嵌套问题
dengling4813的博客
06-19 795
一、问题 在项目里忽然新加了一个需求，在原本弹出的模态框里，点击模态框里面的按钮再弹出一个模态框，出来另个模态框来展示详细信息。此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击（大致示意图如下），那个是时候去查过bootstrap的这个modal，官网上写着： 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要...
Qt5.9 C++开发概述：控件与模态窗口详解
在本篇Qt个人学习记录总结中，作者分享了关于Qt5.9 C++开发的一些基础知识和关键控件的使用方法。首先，视频教程《Qt5.9 C++开发指南》（2021完整版）是学习者入门的良好资源，链接位于B站（），对于初学者来说，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是汤圆丫

怎么 给1分?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值