bfw-dia 基于bfwui的简单的自定义弹出框插件

bfw-dia 基于bfwui的简单的自定义弹出框插件

bfw-dia 基于bfwui的简单的自定义弹出框插件

使用方式:

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["bfw-dia", "bfw"], function() {
                $('#opendia').click(function() {
                    $('#login').dia(function() {
                        return true;
                    }, [function() {
                            alert("登录")}, function() {
                            alert("注册")}])
                });

            });
        });
    </script>
</head>
<body>
    <div id="opendia">
        点击
    </div>
    <div
        class="bfw-pos-fixed bfw-dia bfw-dia-3 bfw-zindex-4 bfw-color-w bfw-color-b-grey bfw-sha "
        id="login">
        <div class="bfw-dia-title bfw-pad-m bfw-color-b-b">
            <span>登录窗口</span><span class="bfw-dia-close">×</span>
        </div>
        <div class="bfw-dia-cont bfw-pad-m bfw-align-c">
            <input type="text" class="bfw-mar-s " placeholder="请输入账号" /> <input
            type="password" class="bfw-mar-s " placeholder="请输入密码" />
        </div>
        <div class="bfw-dia-btn-bar bfw-pad-s bfw-align-c">
            <a class="bfw-dia-btn bfw-pad-s ">登录</a><a
                class="bfw-dia-btn bfw-pad-s">注册</a>
        </div>

    </div>
</body>
</html>


立即下载bfw-dia.js查看所有js插件

网友评论0

程序员在线工具箱