12--jQuery插件大全-- layer弹窗

最新推荐文章于 2022-04-18 16:09:05 发布

猪哥哥呀

最新推荐文章于 2022-04-18 16:09:05 发布

阅读量220

点赞数

分类专栏： jquery 文章标签： layer插件 layer弹窗

本文链接：https://blog.csdn.net/weixin_42133396/article/details/102624386

版权

jquery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

layer弹窗

-官网[http://layer.layui.com/](http://layer.layui.com/)
-github[https://github.com/sentsin/layer/](https://github.com/sentsin/layer/)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <link rel="stylesheet" href="../css/layer/css/layer.css">
    <link rel="stylesheet" href="../css/bootstrap3/css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/layer/js/layer.js"></script>
    <script src="../js/bootstrap3/js/bootstrap.min.js"></script>
    <style>
        .hideContent {
            display: none;
            padding: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div><h1>layer演示</h1>
        <hr>
    </div>
    <div>
        <a href="javascript:void(0) " class="btn btn-primary" id="layer-demo01">layer入门</a>
        <a href="javascript:void(0) " class="btn btn-primary" id="layer-demo02">喜欢我吗？</a>
        <a href="javascript:void(0) " class="btn btn-primary" id="layer-demo03">点我有惊喜</a>
        <a href="javascript:void(0) " class="btn btn-primary" id="layer-demo04">小提示</a>
        <a href="javascript:void(0) " class="btn btn-primary" id="layer-demo05">自定义</a>
    </div>
    <div id="hideImg">

    </div>
    <div class="hideContent text-info" id="hidep">
        <p>我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ''})layer.msg('', {time:
            3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块</p>
    </div>
</div>
<script>
    $(function () {
        $("#layer-demo01").click(function () {
            layer.alert("欢迎使用layer", {icon: 2})
        });
        $("#layer-demo02").click(function () {
            layer.confirm("你确定喜欢我吗？", {btn: ["钟情已久", "奇葩问题"]}, function () {
                layer.msg("我也喜欢你", {icon: 1})
            }, function () {
                layer.msg("去屎吧", {icon: 5})
            })
        });
        $("#layer-demo03").click(function () {
            var imgShow = layer.load(1)
            setTimeout(function () {
                layer.close(imgShow);
                $("#hideImg").append(" <img src=\"../img/man03.jpg\" alt=\"\" class=\"img-responsive\">");
            }, 3000)
        });
        $("#layer-demo04").click(function () {
            layer.tips("中秋节放假三天", this, {tips: 2, time: 5000})
        });
        $("#layer-demo05").click(function () {
            layer.open({
                /*                content:"layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。\n" +
                                    "\n" +
                                    "在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被9777158人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。\n" +
                                    "\n" +
                                    "layer 采用 MIT 开源许可证，将会永久性提供无偿服务。因着数年的坚持维护，截至到2017年9月13日，已运用在超过 30万 家 Web 平台，其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，并且她仍在与 Layui 一并高速发展。Fly",*/
                // content:["http://bailiban.com","no"],
                //  content:["温馨提示","#layer-demo04"],
                type: 1,
                content: $("#hidep"),
                title: "layer介绍",
                area: ["700px", "500px"],
                maxmin: true,
                anim:6
            })
        });
    })
</script>
</body>
</html>