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: 0;
    margin: 0;
    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")
    });
}

posted @ 2016-03-06 21:41  嘆世殘者——華帥  阅读(434)  评论(0)  编辑  收藏  举报