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将无法进行下一步的操 ...
随机推荐
- java的排序类 Collections
场景:比如说有一个List<Student> 里面有许多学生 我们想让这些学生按照年龄的大小排序 我们可以用java自带的 java.util.Collections 工具类来实现 Col ...
- springSecurity初步认识和执行流程
springSecurity是spring官方给我们提供的一个非常强大的一个安全框架.也是现在最受欢迎的安全框架,比shiro更强大 springSecurity主要工作原理是内置了许多过滤器,组成过 ...
- JAVA记录-基础常识
1.==与equals区别 1)==用于基本数据类型的比较,判断引用是否指向堆内存的同一地址.---引用地址 2)equals用于判断两个变量是否是对同一对象的引用,即堆中的内容是否相同,返回值为布尔 ...
- Tomcat 或JBOSS java.lang.ArrayIndexOutOfBoundsException: 8192 解决方案【转】
错误信息: 2017-1-17 10:09:39 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() ...
- JS获取客户端IP地址、MAC和主机名【转】
JS获取客户端IP地址.MAC和主机名 引用:JS获取客户端IP地址.MAC和主机名的7个方法汇总 利用搜狐接口 <html> <head> <meta http-equ ...
- HDU - 4370 0 or 1
0 or 1 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- C# 实现线段的编码裁剪算法（vs2010）
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- __weak 修饰符
在 HAL 库中,很多回调函数前面使用__weak 修饰符,这里我们有必要给大家讲解__weak 修饰符的作用. weak 顾名思义是“弱”的意思,所以如果函数名称前面加上__weak 修饰符,我们一 ...
- 13. Spring Boot 拦截器
1.thymeleaf 页面修改后可能不会实时反馈到Web,做2步骤: 1)禁用掉tymleaf 缓存: spring.thymeleaf.cache=false 2)IDE编辑器:Ctrl + F ...
- MGR架构 ~ MGR+proxysql(2)
一 简介: 上篇环境已经搭建完成,我们开始进行测试 二 工具和环境: sysbench ,mgr+proxysql 三 测试方式: sysbench+oltp.lua脚本 四 模拟故障 1 并发环境观 ...