前端开发jQuery 弹窗插件

前端开发文档的书写|web前端开发必备浏览器|前端界面开发流程

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
</head>
<body>
    <script src=”https://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <script type=”text/javascript”>
        var alertWin = {
            title: “温馨提示”,//弹窗标题
            msg: “确定融合氢气和氧水吗?”,//弹窗内容
            width: 300,//弹窗宽度
            height: 250,//弹窗高度
            btnArr: [“取消”, “确认”],//按钮数组
            fnArr: [fnCancel, fnSure]//按钮对应的处理方法数组(和按钮相互对应)
        }
        /***********************我是分割线********************************************/
        function alertWinWin(obj) {
            var alertWin = {
                title: “标题”,
                msg: “一些内容”,
                width: 300,
                height: 250,
                btnArr: [“取消”, “确认”],
                fnArr: [fnCancel, fnSure]
            }
            $.extend(alertWin, obj);
            var maxWidth = $(window).width();//屏幕最大宽度
            var maxHeight = $(window).height();//屏幕最大高度
            //追加遮罩层
            var wrap = $(‘<div></div>’);
            wrap.css({
                “position”: “fixed”,
                “top”: 0,
                “left”: 0,
                “z-index”: 99,
                “width”: “100%”,
                “height”: “100%”,
                “background”: “rgba(0,0,0,.3)”
            });
            $(“body”).append(wrap);
            //追加遮罩内容区
            var pop = $(‘<div></div>’);
            pop.css({
                “position”: “relative”,
                “top”: (maxHeight – alertWin.height) / 2,
                “left”: (maxWidth – alertWin.width) / 2,
                “width”: alertWin.width,
                “height”: alertWin.height,
                “background”: “#F2F2F2 url(‘http://wcmtest.uicredit.cn/H5/personal/images/pic@2x.png’) no-repeat top 60px center / 146px 80px”,
                “border-radius”: “10px”,
                “text-align”: “center”,
                “color”: “#989898”,
                “box-shadow”: “0 0 15px #999”
            });
            wrap.append(pop);
            //追加标题
            if (title != “”) {
                var title = $(‘<div>’ + alertWin.title + ‘</div>’);
                title.css({
                    “width”: “100%”,
                    “height”: “70px”,
                    “line-height”: “70px”,
                    “font-size”: “20px”
                });
                pop.append(title);
            }
            //追加内容
            var msg = $(‘<div>’ + alertWin.msg + ‘</div>’);
            msg.css({
                “padding”: “20px 0”,
                “font-size”: “14px”,
                “padding”: “90px 0 0 0”
            });
            pop.append(msg);
            //追加按钮
            if (alertWin.btnArr != “”) {
                var btnWrap = $(‘<div></div>’);
                btnWrap.css({
                    “position”: “absolute”,
                    “bottom”: 0,
                    “left”: “5%”,
                    “width”: ” 90%”,
                    “display”: “block”,
                    “text-align”: “center”,
                    “font-size”: “17px”,
                    “border-top”: “1px solid #ddd”
                });
                msg.append(btnWrap);
                $.each(alertWin.btnArr, function (i, v) {
                    var btn = $(‘<a>’ + v + ‘</a>’);
                    btn.css({
                        “display”: “inline-block”,
                        “width”: “48%”,
                        “padding”: “15px 0”,
                        “color”: “#00C3AB”,
                        “cursor”: “pointer”
                    });
                    btn.click(alertWin.fnArr[i]);
                    btnWrap.append(btn);
                });
            }
        }
        function fnSure() {
            alert(“确定”);
        }
        function fnCancel() {
            alert(“取消”);
        }
        alertWinWin(alertWin);
    </script>
</body>
</html>

前端网站开发一个月多少钱|前端网站如何快速开发|手机网站前端开发

» 本文来自:前端开发者 » 《前端开发jQuery 弹窗插件》
» 本文链接地址:https://www.rokub.com/5114.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!