<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title> <style>
.none{display:none}
.x_Popup {
width: 330px;
height: 120px;
padding: 10px;
}
.x_Popup p i{vertical-align: middle;}
/*demo-class是layer弹窗可以自定义的样式 通过skin来调用*/
.demo-class .layui-layer-btn a.layui-layer-btn0{
background: #279eb7;
outline: none;
border-color: #279eb7
}
.demo-class .layui-layer-title {
padding: 0 80px 0 10px;
color: #fff;
background-color: #279eb7;
font-size: 16px;
}
</style> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="layer/layer.js"></script>
</head>
<body>
<button id="Sign_out">点击</button>
<div class="x_Popup Sign_out none">
<p class="f16 tc pt30 c333"><i class="iconfont juse f30"></i> 您确定要退出么?</p>
</div>
<script>
$('#Sign_out').on('click', function(){
layer.open({
skin:'demo-class', //调用自定义样式
type: 1, //基本层类型
title:'提示',
closeBtn: 1,//关闭按钮
shift:0,//动画
shadeClose: true,//是否点击遮罩关闭
maxWidth:380,
content: ($(".Sign_out")),
btn:["确定","取消"]
});
}); </script>
</body>
</html>

这是layer官网弹层所有参数链接地址:http://layer.layui.com/api.html#tips

layer弹层基本参数初尝试的更多相关文章

  1. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

  2. layer弹层插件

      // 使用前需要引入jquery的支持,链接如下:   https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js    ...

  3. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  4. Layer弹层组件 二次扩展,项目中直接使用。

    /************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...

  5. layer弹层

    获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可. 注意:引入layer.js前必须先引入jquery1. ...

  6. Layer弹层(父子传值,兄弟传值)

    需求:最外面列表界面点修改弹出LayerA界面,再点击LayerA界面中的选择地图坐标按钮弹出LayerB地图界面 这个过程涉及到的: 1:LayerA将坐标传给LayerB,LayerB在地图上显示 ...

  7. HTML5 本地存储+layer弹层组件制作记事本

    什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...

  8. layer弹层content写错导致div复制了一次,导致id失效 $().val() 获取不到dispaly:none div里表单的值

    ​ 错误之源: $("a.consult").click(function () {         lib_consult_html = $('#consult-html').h ...

  9. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

随机推荐

  1. [JXOI2018]守卫

    嘟嘟嘟 正如某题解所说,这题很有误导性:我就一直在想凸包. 随便一个数据,就能把凸包hack掉: 这样我们的点G就gg了. 所以正解是什么呢?dp. 题解看这位老哥的吧,我感觉挺好懂的:题解 P456 ...

  2. LeetCode练习2 两数相加

    问题如下: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来 ...

  3. 3D打印社区

    http://mc.dfrobot.com.cn/forum.php?mod=forumdisplay&fid=100&filter=typeid&typeid=9

  4. .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中

    不知你是否见过 try { } finally { } 代码中,try 块留空,而只往 finally 中写代码的情况呢?这种写法有其特殊的目的. 本文就来说说这种不一样的写法. 你可以点开这个链接查 ...

  5. MySQL 8 新特性之自增主键的持久化

    自增主键没有持久化是个比较早的bug,这点从其在官方bug网站的id号也可看出(https://bugs.mysql.com/bug.php?id=199).由Peter Zaitsev(现Perco ...

  6. flask异常处理

    对于异常,通常可以分为两类:一类是可以预知的异常,我们通常会用try...except....捕捉,第二类是未知的error,我们是无法预知的. try: code block except A: e ...

  7. 01 Django REST Framework 介绍

    01-Django REST Framework的介绍 Django REST框架是一个用于构建Web API的强大而灵活的工具包. 您可能希望使用REST框架的一些原因: 1. Web可浏览API对 ...

  8. centos7 关闭selinux

    关闭SeLinux 临时关闭:setenforce 0 永久关闭:vi /etc/selinux/config

  9. H5 54-清空默认边距

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 小P的金字塔

    题目描述 小P感到自己前几天太作了,于是非常有远见的决定为自己建立一座金字塔. 现在他有n种标准长方体的石头,每种石头只有两个,第i种石头是长宽高分别为Xi,Yi,Zi的长方体.由于整个工程只有小P一 ...