HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="btn">
<button onclick="MyClick1()">alert弹框美化</button>
<button onclick="MyClick2()">提示框美化</button>
<button onclick="MyClick3()">信息框</button>
<button onclick="MyClick4()">弹出div登录层</button>
</div> <div id="box">
<div class="box-con">
<input type="text">
</div>
<div class="box-con">
<input type="text">
</div>
<div class="box-con">
<a href="javascript:;">登录</a>
</div>
</div> </body>
</html>

CSS

*{
padding:;
margin:;
font-family: "华文行楷";
}
button{
width: 300px;
height: 60px;
color: #fff;
background-color: purple;
font-size: 44px;
}
.box-con input{
width: 350px;
height: 42px;
}
.box-con a{
width: 354px;
height: 50px;
background-color: #30c;
display: block;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 30px;
text-decoration: none;
}
.box-con{
margin-left: 20px;
margin-top: 15px;
}
#box{
display: none;
}

JS

function MyClick1(){
//alert弹框美化
layer.alert("你好",{
title:"说明",
icon:7,
skin:"layui-layer-molv"
});
} function MyClick2(){
//提示框美化
layer.confirm("你确定吗?",{
title:"提示",
icon:3
},function(){
layer.alert("删除成功!",{icon:6});
},function(){
layer.alert("删除失败!",{icon:5});
});
} function MyClick3(){
//信息框
layer.msg("我是一个非常普通的信息框",{
icon:1,
time:2000
},function(){ //隐藏之后要做的事
location.href = "http://www.cnblogs.com/Harold-Hua/";
});
} function MyClick4(){
//弹出div登录层
layer.open({
type:1,
title:"登录",
area:["390px","270px"],
content:$("#box")
});
}

layer.js弹出框的更多相关文章

  1. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  2. 使用layer显示弹出框笔记

    $.layer({     area : ['200px','auto'], //控制层宽高.当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐这样做.例如:area : ['310px ...

  3. 【转】js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  4. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  5. jQuery layer[页面弹出框]

    常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...

  6. 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

    一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...

  7. 如何妥善处理WebBrowser对Javascript的错误问题,阻止JS弹出框,提高用户体验

    由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...

  8. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  9. 转:WebDriver(Selenium2) 处理可能存在的JS弹出框

    在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...

随机推荐

  1. python 代码模板

    命令[python3 -m pydoc -p 1234]   通过http://localhost:1234来访问查看文档 # -*- coding: utf-8 -*-""&qu ...

  2. Element link doesn't have required attribute property

    前端标准http://validator.w3.org/ 拒绝你的代码时报 Element link doesn't have required attribute property 把样式链接 &l ...

  3. FineReport: 清空(重置)条件reset()

    在使用控件时,有时我们希望能够快捷的重置控件的内容,或者重置所有控件的内容,效果如下图所示: 1.给需要重置的控件设置控件名 2.给重置按钮设置点击事件 3.点击事件中加入javascript代码 只 ...

  4. 2018秋寒假作业6- -PTA编程总结3

    PTA3抓老鼠啊~亏了还是赚了?思路: 首先定义变量并初始化为零,然后用if-else语句判断其关系和计算奶酪数量及盈利情况.

  5. Java基础中的一些概念理解

    同步 和 异步区别 同步和异步通常用来形容一次方法的调用. 同步方法调用一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为.而异步方法调用更像一个消息传递,一旦开始,方法调用就会立即返回,调用 ...

  6. Shiro缓存(十三)

    使用缓存,可以解决每次访问请求都查数据库的问题.第一次授权后存入缓存. 缓存流程 shiro中提供了对认证信息和授权信息的缓存.shiro默认是关闭认证信息缓存的,对于授权信息的缓存shiro默认开启 ...

  7. 使用Groovy的mixin方法注入,和mixedIn属性实现过滤链

    mixin方法注入不多说,这里只是用这个属性搞一个过滤器链的功能 假设我现在有个方法,输入一个字符串,然后需求提出需要进行大写转换输出, 过了一天又要加个前缀,再过了一天,需要把一些字符过滤掉.... ...

  8. Cpp读文件、CString转String、String转CString

    场景 C++读取文件 技术点 读取文件 fstream提供了三个类,用来实现c++对文件的操作.(文件的创建.读.写). ifstream -- 从已有的文件读入 ofstream -- 向文件写内容 ...

  9. 【Linux】Linux下统计当前文件夹下的文件个数、目录个数

    统计当前文件夹下文件的个数,包括子文件夹里的 ls -lR|grep "^-"|wc -l 统计文件夹下目录的个数,包括子文件夹里的 ls -lR|grep "^d&qu ...

  10. python之random模块分析(一)

    random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): 这是一个产生整数随机数的函数,参数start代 ...