自定义浏览器弹窗

最新推荐文章于 2023-12-01 09:57:14 发布
zsf53543831
最新推荐文章于 2023-12-01 09:57:14 发布
阅读量601
点赞数
本文链接：https://blog.csdn.net/zsf53543831/article/details/50710304
版权
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
            * { margin:0px;padding:0px; }
            a{ text-decoration:none}
            .testDiv a { display:block; margin:20px;}
            .myShade { position: absolute;top: 0;left: 0;width: 100%;opacity:0.10;filter:alpha(opacity=10);background-color: grey;display: none;cursor:pointer;}
            .alertDiv,.promptDiv,.confirmDiv { position:absolute;width:400px;height:150px;background-color: white;border: 2px solid #fd8a03;border-radius: 5px;}
            .promptDiv { height:200px;}
            .btnPopup {position: absolute;/*top: 125px;*/bottom:15px; left:130px;}
            .btnPopup .btnSure { padding: 2px 15px;border: 1px solid #888888;/*margin-left:190px;*/ margin-left:30px;}
            .btnPopup .btnCancel { padding: 2px 15px;border: 1px solid #888888;/*margin-left:45px;*/}
            .msgPopup { margin: 20px 10px; }
            .msgPopup img{ width: 25px;vertical-align: middle; }
            .msgPopup span{ font-size: 16px;padding:5px 10px; }
            .msgPopup textarea{ display: block;margin: 5px 5px 0px 35px;width: 320px;height: 89px;padding: 3px 5px;font-size: 14px; }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btnAlert").click(function () {
                MyAlert(true, "点击alert事件", function () {
                    //点击确定之后执行的事件
                    $("#btnAlert").html("点击了alert按钮");
                });
            })
            $("#btnConfirm").click(function () {
                MyConfirm("确定要隐藏comfirm按钮吗？", function (result) {
                    if (result) {
                        MyAlert(true, "我点击了确定", function () {
                            $("#btnConfirm").hide();
                        });
                    } else {
                        MyAlert(false, "我点击了取消");
                    }
                })
            })
            $("#btnPrompt").click(function () {
                MyPrompt("", true, function (result, content) {
                    if (result) {
                        MyAlert(true, "我输入的内容是：" + content);
                    } else {
                        MyAlert(false, "我点击了取消");
                    }
                }, 64, "请填写你的姓名");
            })
        })
        //弹出框(弹出框类型，文字描述，成功/失败)
        function MyPopup(type, msg, flag, callback, contentCount, contentValue) {
            //取document和window是在iframe中或者是在主窗体中
            var parentDocument = $(window.parent.document).length == 1 ? window.parent.document : window.document;
            var parentWindow = $(window.parent.document).length == 1 ? window.parent.window : window;
            var parentBody = $(parentDocument).find("body");
            $(parentBody).find(".myShade").remove();
            $(parentBody).find("." + type + "Div").remove();
            //添加一个浮层，当弹窗显示的时候，浮层遮挡，不能点击其他标签
            $(parentBody).append("<div class='myShade'></div>");
            var myShade = $(parentBody).find(".myShade");
            $(myShade).css("height", $(parentWindow).height());
            $(myShade).show();
            //当点击浮层的时候，弹窗有变大的反应。
            $(myShade).unbind("click").click(function () {
                var div = $(parentBody).find("." + type + "Div");
                var h = Number($(div).height());
                var alertDivLeft = /\d+/.exec($(div).css("left")), alertDivTop = /\d+/.exec($(div).css("top"));
                $(div).animate({ "width": "405px", "height": (h + 5) + "px", "left": (alertDivLeft - 2.5) + "px", "top": (alertDivTop - 2.5) + "px" }, 100, function () {
                    $(div).animate({ "width": "400px", "height": h + "px", "left": alertDivLeft + "px", "top": alertDivTop + "px" }, 100);
                });
            })
            var divHtml = "";
            if (type == "alert") {
                divHtml = "<div class='alertDiv'><div class='msgPopup'><img src='images/success.jpg'/><span></span></div><div class='btnPopup'><a class='btnSure' href='javascript:void(0)'>确定</a></div></div>";
            } else if (type == "prompt") {
                divHtml = "<div class='promptDiv'><div class='msgPopup'><img src='images/notice.jpg'/><span></span><textarea></textarea></div><div class='btnPopup'><a class='btnCancel' href='javascript:void(0)'>取消</a><a class='btnSure' href='javascript:void(0)'>确定</a></div></div>";
            } else if (type == "confirm") {
                divHtml = "<div class='confirmDiv'><div class='msgPopup'><img src='images/notice.jpg'/><span></span></div><div class='btnPopup'><a class='btnCancel' href='javascript:void(0)'>取消</a><a class='btnSure' href='javascript:void(0)'>确定</a></div></div>";
            }
            $(parentBody).append(divHtml);

            var popupDiv = $(parentBody).find("." + type + "Div");

            $(popupDiv).css({ "left": ($(parentBody).width() - $(popupDiv).width()) / 2 + "px" });

            $(popupDiv).find("span").html(msg + (contentCount ? "（" + contentCount + "个字符以内）" : ""));
            $(popupDiv).find("textarea").attr("maxLength", contentCount);
            $(popupDiv).css("top", $(parentDocument).scrollTop() + 10 + "px").show();
            if (type == "alert") {
                if (flag) {
                    $(popupDiv).find("img").attr("src", "images/success.jpg");
                } else {
                    $(popupDiv).find("img").attr("src", "images/error.jpg");
                }
                $(popupDiv).find("a").unbind("click").click(function () {
                    HideMyShade(myShade, popupDiv, parentWindow);
                    if (callback != null) {
                        callback();
                    }
                })
            } else if (type == "prompt" || type == "confirm") {
                contentValue ?InputMsg($(popupDiv).find("textarea"), contentValue): (flag ? InputMsg($(popupDiv).find("textarea"), "该内容为必填！") : "");
                $(popupDiv).find("a.btnSure").unbind("click").click(function () {
                    if (type == "prompt") {
                        var content = $(popupDiv).find("textarea").val().replace(/\s/g, "");
                        if (flag && (content == "" || content == "该内容为必填！")) {
                            $(popupDiv).find("textarea").focus();
                            return false;
                        }
                        content = content == "该内容为必填！" ? "" : content;
                        $(popupDiv).find("textarea").val("");
                        HideMyShade(myShade, popupDiv, parentWindow);
                        if (callback != null) {
                            callback(true, content);
                        }
                    } else {
                        HideMyShade(myShade, popupDiv, parentWindow);
                        if (callback != null) {
                            callback(true);
                        }
                    }
                })
                $(popupDiv).find("a.btnCancel").unbind("click").click(function () {
                    HideMyShade(myShade, popupDiv, parentWindow);
                    if (callback != null) {
                        callback(false);
                    }
                })
            }
            DisableScroll(parentWindow, parentDocument); //禁止滚动条滚动
            //点击回车键，默认点击确定按钮
            $(parentWindow).unbind("keyup").keyup(function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) {
                    $(popupDiv).find("a.btnSure").click();
                }
            })
        }
        //隐藏浮层
        function HideMyShade(myShade, popupDiv, window) {
            $(myShade).hide();
            $(popupDiv).hide();
            EnableScroll(window);
        }
        //alert弹出框（成功/失败,文字描述）
        function MyAlert(isSuccess, msg, callback) {
            MyPopup("alert", msg, isSuccess, callback);
        }
        //prompt弹出框（文字描述,文本框是否必填,回调函数,内容字数，内容提示文字）
        function MyPrompt(msg, isMust, callback, contentCount, contentValue) {
            MyPopup("prompt", msg, isMust, callback, contentCount, contentValue);
        }
        //confirm 弹出框
        function MyConfirm(msg, callback) {
            MyPopup("confirm", msg, null, callback);
        }
        //禁止滚动
        function DisableScroll(window, document) {
            var scrollTop = $(document).scrollTop();
            window.onmousewheel = function () {
                return false;
            }
            window.onscroll = function () {
                $(document).scrollTop(scrollTop);
            }
        }
        //可以滚动
        function EnableScroll(window) {
            window.onmousewheel = function () {
                return true;
            }
            window.onscroll = function () {
                return true;
            }
        }
        //获取焦点/移除焦点提示文字
        function InputMsg(that, msg) {
            $(that).val(msg).click(function (event) {
                event.stopPropagation();
            }).unbind("focus").focus(function (event) {
                if ($(this).val() == msg) {
                    $(this).val("");
                }
            }).unbind("blur").blur(function () {
                if ($(this).val().replace(/\s/g, "") == "") {
                    $(this).val(msg);
                }
            });
        }
    </script>
</head>
<body>
        <div class="testDiv">
            <a href="javascript:void(0)" id="btnAlert">alert弹窗</a>
            <a href="javascript:void(0)" id="btnConfirm">confirm弹窗</a>
            <a href="javascript:void(0)" id="btnPrompt">prompt弹窗</a>
        </div>
</body>
</html>