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实现）模拟二进制交叉SBX 多项式变异

    代码地址: https://github.com/guojun007/real_sga 本部分是采用实数编码的标准遗传算法,整体流程与上一篇二进制编码的基本一致, 主要区别在于本部分的交叉操作为模拟二 ...

  2. 阿里巴巴为什么不用 ZooKeeper 做服务发现？

    阿里巴巴为什么不用 ZooKeeper 做服务发现? http://jm.taobao.org/2018/06/13/%E5%81%9A%E6%9C%8D%E5%8A%A1%E5%8F%91%E7%8 ...

  3. C# Winform继承窗体打开设计器白屏的一例解决方法

    环境VS2017 15.5.4,Win10开发过程中,发现一些窗体打开设计器会卡死白屏,另外有一些不会,(两者运行时正常),最小化vs后甚至能把工具箱连带搞黑,严重影响开发效率,经过一天多的对比研究, ...

  4. C# 窗体内有子控件时鼠标检测

    public partial class FormPop : Form { public FormPop() { InitializeComponent(); } private void FormP ...

  5. sonar扫描java、js、jsp技术

    最近在弄sonar扫描的事情,之前一直只能扫描java代码,这样统计出来的数据上报领导很多开发人员不服(说我不用写jsp了不用写js了?), 那么好,于是乎继续整sonar,在官网中看到sonar其实 ...

  6. 计算机网络之互联网|因特网|万维网|HTTP|HTML之间的关系辨析

    本博文基于知乎"Web 是什么意思?"一问而引起.(本文均属于博主从知乎上自身所答搬运而至). 如无特殊声明,括号()内以分号分隔的名词均等效. 本文如无特殊引用声明,则所有内容版 ...

  7. Java SE之基本程序设计结构

     概述:    0.注释    1.基本数据类型(有且仅有8个):         1.1 整型:int,short,long,byte(表示一个字节,[-128,127])          1.2 ...

  8. iOS视频开发经验

    iOS视频开发经验 手机比PC的优势除了便携外,我认为最重要的就是可以快速方便的创作多媒体作品.照片分享,语音输入,视频录制,地理位置.一个成功的手机APP从产品形态上都有这其中的一项或多项,比如in ...

  9. 图片的Base64编码

    Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...

  10. slf4j的简单用法以及与log4j的区别

    之前在项目中用的日志记录器都是log4j的日志记录器,可是到了新公司发现都是slf4j,于是想着研究一下slf4j的用法. 注意:每次引入Logger的时候注意引入的jar包,因为有Logger的包太 ...