模态框基于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">×</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">×</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>-->
<!--<!– <li>–>-->
<!--<!– logo图片:<input type="text" name="titleLogo"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 大标题:<input type="text" name="bigTitle"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 小标题:<input type="text" name="smallTitle"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 海报:<input type="text" name="poster"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 销售量:<input type="text" name="saleAmount"/>–>-->
<!--<!– </li>–>-->
<!-- <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>-->
<!--<!– <li>–>-->
<!--<!– 用户id:<input type="text" name="userId"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 创建人:<input type="text" name="createId"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 创建时间:<input type="text" name="createDate"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 修改人:<input type="text" name="updateId"/>–>-->
<!--<!– </li>–>-->
<!--<!– <li>–>-->
<!--<!– 修改时间:<input type="text" name="updateDate"/>–>-->
<!--<!– </li>–>-->
<!-- <li>-->
<!-- 状态:<input type="text" name="status"/>-->
<!-- </li>-->
<!--<!– <li>–>-->
<!--<!– 分销员id 分销员跟店铺绑定:<input type="text" name="incomeId"/>–>-->
<!--<!– </li>–>-->
<!-- <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> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</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">×</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">×</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>