layer.js弹出框
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弹出框的更多相关文章
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- 使用layer显示弹出框笔记
$.layer({ area : ['200px','auto'], //控制层宽高.当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐这样做.例如:area : ['310px ...
- 【转】js弹出框、对话框、提示框、弹窗总结
js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...
- js js弹出框、对话框、提示框、弹窗总结
js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...
- jQuery layer[页面弹出框]
常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...
- 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型
一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...
- 如何妥善处理WebBrowser对Javascript的错误问题，阻止JS弹出框，提高用户体验
由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...
- JS弹出框插件zDialog再次封装
zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...
- 转：WebDriver(Selenium2) 处理可能存在的JS弹出框
在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...
随机推荐
- 获取当前操作系统的ip
代码如下: #include "stdafx.h" #include <WinSock2.h> int get_local_ip() { WSADATA wsaData ...
- ruby where用法
用法1 Subject.where(").order("name") 用法2 与find方法不同的是,where方法返回的结果不是数组而是ActiveRelation,这 ...
- 转--Python语言特性
1 Python的函数参数传递 看两个例子: a = 1 def fun(a): a = 2 fun(a) print a # 1 a = [] def fun(a): a.append(1) fun ...
- Java面试题系列（三）Java new一个对象的过程中发生了什么
Person class Person{ private String name; private int age; public Person() { super(); } public Perso ...
- Telnet Protocol Specification
Network Working Group J. Postel Request for Comments: 854 J. Reynolds ISI Obsoletes: NIC 18639 May 1 ...
- mysql面试题分组并合并列
- mongoDB - 日常操作三
MongoDB 进程控制 进程控制 db.currentOp() # 查看活动进程 db.$cmd.sys.inprog.findOne() # 查看活动进程 与上面一样 opid # 操作进程号 o ...
- POJ 2513 Colored Sticks （欧拉回路+并查集+字典树）
题目链接 Description You are given a bunch of wooden sticks. Each endpoint of each stick is colored with ...
- GSON中Java对象与JSON互相转换——(一)
json的转换插件是通过java的一些工具,直接将java对象或集合转换成json字符串. 常用的json转换工具有如下几种: 1)jsonlib 2)Gson:google 3)fastjson:阿 ...
- Struts局部异常与全局异常处理
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAowAAAG3CAIAAACxBJNyAAAgAElEQVR4nOy9z6tk15Ymdv4B0eRU8O