利用layer制作好看的弹出框
一、下载layer
二、效果图
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer弹出框</title>
<style>
.bt-form {
height: 100%;
font-size: 12px;
} .pb70 {
padding-bottom: 70px !important;
} .pd20 {
padding: 20px;
} .line {
padding: 5px 0;
} .line .tname {
display: block;
float: left;
height: 32px;
line-height: 32px;
overflow: hidden;
padding-right: 20px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 100px;
} .line .info-r {
margin-bottom: 5px;
margin-left: 100px;
position: relative;
} .bt-input-text {
border: 1px solid #ccc;
height: 30px;
line-height: 30px;
padding-left: 5px;
border-radius: 2px;
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
} .mr5 {
margin-right: 5px;
} .bt-form-submit-btn {
background: #f6f8f8;
border-top: 1px solid #edf1f2;
bottom: 0;
left: 0;
padding: 8px 20px 10px;
position: absolute;
text-align: right;
width: 100%;
box-sizing: border-box;
} .bt-form-submit-btn .btn:first-child {
margin-right: 4px;
} .btn-group-sm > .btn, .btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
} .btn-my {
background-color: #cbcbcb;
border-color: #cbcbcb;
color: #fff;
} .btn-my:hover {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
} .btn-success {
background: #50C05A;
border: #74D47D 1px solid;
color: #fff;
} .layui-layer-setwin .layui-layer-close2:hover {
transform: rotate(360deg) !important;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<script src="./layer/layer.js"></script>
<script>
var message = layer.open({
type: 1,
title: "信息补全",
area: '580px',
closeBtn: 2,
shadeClose: false,
shade: false,
offset: 'auto',
shade: [0.3, '#000'],
content: `<form class="bt-form pd20 pb70" id="form">
<div class="line">
<span class="tname">真实姓名 <span style="color: #f00;">*</span></span>
<div class="info-r ">
<input name="post[truename]" required placeholder="请输入真实姓名" class="bt-input-text mr5 " type="text"
style="width:330px" value="">
</div>
</div>
<div class="line">
<span class="tname">身份证 <span style="color: #f00;">*</span></span>
<div class="info-r ">
<input name="post[thumb]" id="thumb" class="bt-input-text mr5 " type="hidden" >
<input name="post[thumb1]" id="thumb1" class="bt-input-text mr5 " type="hidden" >
<input name="post[thumb2]" id="thumb2" class="bt-input-text mr5 " type="hidden" >
<table width="355">
<tbody>
<tr align="left" height="100" class="c_p">
<td width="20" style="padding: 0;position: relative;">
<img src="https://www.boyuan.com/skin/default/image/waitpic.gif" id="showthumb" title="预览图片"
onclick="if(this.src.indexOf('waitpic.gif') == -1){_preview(Dd('showthumb').src, 1);}else{Dalbum('',5,300,300, Dd('thumb').value, true);}">
<img src="https://www.boyuan.com/member/image/img_delete.gif" width="12" height="12" title="删除" onclick="delAlbum('','wait');" style="
position: absolute;z-index: 1;right: 10px;top: -5px;">
</td>
<td width="20" style="padding: 0;position: relative;"><img src="https://www.boyuan.com/skin/default/image/waitpic.gif" width="100"
height="100" id="showthumb1" title="预览图片"
onclick="if(this.src.indexOf('waitpic.gif') == -1){_preview(Dd('showthumb1').src, 1);}else{Dalbum(1,5,300,300, Dd('thumb1').value, true);}">
</td>
<td width="20" style="padding: 0;position: relative;"><img src="https://www.boyuan.com/skin/default/image/waitpic.gif" width="100"
height="100" id="showthumb2" title="预览图片"
onclick="if(this.src.indexOf('waitpic.gif') == -1){_preview(Dd('showthumb2').src, 1);}else{Dalbum(2,5,300,300, Dd('thumb2').value, true);}">
</td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bt-form-submit-btn">
<button type="button" class="btn btn-sm btn-my" id="close-modal">关闭</button>
<button type="button" class="btn btn-sm btn-success" id="submit-form">提交</button>
</div>
</form>`,
cancel: function () { },
success() {
$("#close-modal").on("click", function () {
layer.close(message);
});
$("#submit-form").on("click", function () {
doSubmit(id, message)
});
}
});
</script>
</body>
</html>
利用layer制作好看的弹出框的更多相关文章
- Bootboxjs快速制作Bootstrap的弹出框效果
Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...
- layer.js漂亮的弹出框
它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...
- sweetalert : 一个比较好看的弹出框
1.引入 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script& ...
- layer：好看的弹出窗口
layer是一款web弹层组件,只需在调用时简单地配置相关参数,即可轻松实现丰富与便捷的操作体验. 这是layer的官方地址,里面的使用介绍非常详细(http://layer.layui.com/) ...
- ifream页面弹出框遮盖层覆盖父页面
1.首先找到子页面上遮罩层的id, 2.然后再父页面编写个js方法 function shade() { $(".layui-layer-shade").height($(wind ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
- 使用layer显示弹出框笔记
$.layer({ area : ['200px','auto'], //控制层宽高.当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐这样做.例如:area : ['310px ...
- 弹出框layer的使用封装
layer弹出框官方网址:http://layer.layui.com/ layer常用方法的封装:layerTool.jsp layer.config({ extend: 'extend/layer ...
随机推荐
- MySQL 乱码问题解决
修改 配置文件 只需留下 my.ini文件,然后修改其编码配置. 配置如下 # Example MySQL config file for large systems. # # This is for ...
- css 层叠 比较特殊性
css 层叠: 多个相同的css声明(属性),应用到同一个元素上.当一个标签声明冲突时,浏览器会自动出发层叠机制 1:比较优先级 2:比较特殊性 3:比较源次序 依次经过上面的1,2,3的比较后,最终 ...
- npm查看包版本
点击跳转 ~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0 ^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包 ...
- 使用js解决response.sendRedirect("...")重定向URL之后出现跨域问题
背景: 本系统与门户系统单点登录时候,需要重定向到门户系统的登录页面,可是如果长时间没有操作的话,session会话失效,就需要跳转到登录页面. 所以在使用 response.sendRedirect ...
- Java 之 字符缓冲流
一.字符缓冲输出流 java.io.BufferedWriter extends Writer BufferedWriter:字符缓冲输出流. 继承自父类的共性成员方法: void write(int ...
- jupyter修改默认目录
有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10841241.html 一.修改 win10 ...
- Shiro安全框架入门使用方法
详见:https://blog.csdn.net/qq_32651225/article/details/77199464 框架介绍Apache Shiro是一个强大且易用的Java安全框架,执行身份 ...
- HIVE常用命令之MSCK REPAIR TABLE
MSCK REPAIR TABLE命令主要是用来解决通过hdfs dfs -put或者hdfs api写入hive分区表的数据在hive中无法被查询到的问题.我们知道hive有个服务叫metastor ...
- MVC-Cache-1.输出缓存(Cache:[1].输出缓存2.应用程序缓存)
缓存前提概念: 1.使用缓存的目的就是为提供网站性能,减轻对数据库的压力,提高访问的速度. 2.如果使用缓存不当,比不使用缓存造成的影响更恶劣(缓存数据的更新不及时.缓存过多等). 3..net MV ...
- Django组件之forms
forms:校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.CharField(max_len ...