模仿ios弹出框插件 jquery插件-BFW插件库

模仿ios弹出框插件 jquery插件
模仿ios弹出框插件
第一步引入bfwone
第二步执行代码
示例如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>BFW DEMO JS PAGE</title>
    <script id="bfwone" data="dep=jquery.17" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script>
        bready(function() {
            use(["jquery.uiAlertView", 'uiAlertView'], function() {
                $("#btn0").click(function() {
                    $.alertView("弹出提示信息");
                });

                // 自定义标题、按钮
                $("#btn1").click(function() {

                    var json = {
                        title: "标题",
                        msg: "自定义标题、按钮",
                        buttons: [{
                            title: "Delete", color: "red", click: function() {
                                alert("你点了Delete")}
                        },
                            {
                                title: "Cancel", click: function() {
                                    alert("你点了Cancel")}
                            }]
                    }

                    $.alertView(json);
                });

                // 定义多个按钮
                $("#btn2").click(function() {

                    var json = {
                        title: "提示",
                        msg: "定义多个按钮，定义多个按钮，定义多个按钮，定义多个按钮",
                        buttons: [{
                            title: "first", click: function() {
                                alert("你点了first")}
                        },
                            {
                                title: "second", click: function() {
                                    alert("你点了second")}
                            },
                            {
                                title: "delete", color: "red"
                            }]
                    }

                    $.alertView(json);
                });



                /*
                 * 带文本框的弹窗
                 */
                // 带文本框的弹窗
                $("#btn6").click(function() {
                    var json = {
                        title: "标题",
                        msg: "请输入姓名",
                        input: {
                            type: "text", value: "张三"
                        },
                        buttons: [{
                            title: "OK", click: function(text) {
                                alert("您输入的是:" + text)}
                        },
                            {
                                title: "Cancel"
                            }]
                    }

                    $.alertView(json);
                });

                // 密码输入框
                $("#btn7").click(function() {
                    var json = {
                        title: "标题",
                        msg: "请输入密码",
                        input: {
                            type: "password", placeholder: "请输入密码"
                        },
                        buttons: [{
                            title: "OK", click: function(text) {
                                alert("您输入的是:" + text)}
                        },
                            {
                                title: "Cancel"
                            }]
                    }

                    $.alertView(json);
                });

                // 手动关闭弹窗
                $("#btn11").click(function() {
                    var json = {
                        title: "标题",
                        msg: "密码输入123,手动关闭弹窗",
                        input: {
                            type: "password", placeholder: "请输入密码"
                        },
                        buttons: [
                            // 设置 autoClose:false 会禁止自动关闭弹窗
                            {
                                title: "OK", autoClose: false, click:
                                function(text, element) {
                                    if (text == "123") {
                                        // 使用 $.closeView() 关闭弹窗
                                        $.closeView();
                                    } else {
                                        element.find("input").css("border", "red solid 1px");
                                    }
                                }
                            },
                            {
                                title: "Cancel"
                            }]
                    }

                    $.alertView(json);
                });

                // 禁用遮罩
                $("#btn3").click(function() {

                    var json = {
                        msg: "禁用遮罩",
                        showMask: false // 设置 showMask=false，禁用遮罩
                    }

                    $.alertView(json);
                });
            });


            // 弹出提示信息

        })
    </script>
</head>
<body style="text-align: center;">
    <h3 >仿IOS风格弹窗</h3>
  		<a id="btn0" href="#">弹出提示信息</a><br>
        <a id="btn1" href="#">自定义标题、按钮</a><br>
        <a id="btn2" href="#">定义多个按钮</a><br><br>

        <a id="btn6" href="#">带文本框的弹窗</a><br>
        <a id="btn7" href="#">密码输入框 </a><br>

        <a id="btn11" href="#">手动关闭弹窗</a><br>
        <a id="btn3" href="#">禁用遮罩</a><br><br>
  
</body>
</html>
模仿ios弹出框插件 jquery插件

网友评论0

bfwtoast.js

uiAlertView.js

MODALit.js

modaal.js

sweet-alert.min.js

layer.js

overhang.min.js

jquery.magnific-popup.min.js

jquery.noty.min.js

bfw-dia.js
