自定义插件学习-弹框2

Posted 2020-08-22 有点懒惰的大青年

;(function($) {
    $.alerts = {
        verticalOffset: -75,
        horizontalOffset: 100,
        repositionOnResize: true,
        overlayOpacity: 0.50,
        overlayColor: "#FFF",
        draggable: true,
        okButton: "确 定",
        cancelButton: "取 消",
        dialogClass: null,
        alert: function(content, title, callback) {
            if (title == null) {
                title = "OK"
            }
            $.alerts._show(title, content, null, "alert",
            function(e) {
                if (callback) {
                    callback(e)
                }
            })
        },
        confirm: function(content, title, callback) {
            if (title == null) {
                title = "Are you sure"
            }
            $.alerts._show(title, content, null, "confirm",
            function(e) {
                if (callback) {
                    callback(e)
                }
            })
        },
        prompt: function(content, defaulevalue, title, callback) {
            if (title == null) {
                title = "Please enter something"
            }
            $.alerts._show(title, content, defaulevalue, "prompt",
            function(f) {
                if (callback) {
                    callback(f)
                }
            })
        },
        overShow: function(tips, seconds) {
            if (seconds == null) {
                seconds = 3000
            }
            var hide_seconds = seconds + 600;
            $("body").append(‘<div id="over_container" style="display:none"><div id="over_message"></div></div>‘);
            $("#over_message").text(tips).html($("#over_message").text().replace(/\n/g, "<br/>"));
            if ($.alerts.dialogClass) {
                $("#over_container").addClass($.alerts.dialogClass)
            }
            var position_type = ($.browser.msie && parseInt($.browser.version) <= 6) ? "absolute" : "fixed";
            $("#over_container").css({
                position: position_type,
                zIndex: 99999,
                width: 350,
                padding: 0,
                margin: 0
            }).show("fast");
            $("#over_container").css({
                minWidth: $("#over_container").outerWidth(),
                maxWidth: $("#over_container").outerWidth()
            });
            $.alerts._overReposition();
            
            setTimeout(function() {
                $("#over_container").hide("fast")
            },
            hide_seconds);
            setTimeout(function() {
                $("#over_container").remove()
            },
            hide_seconds)
        },
        _overReposition: function() {
            var top = 4;
            var left = (($(window).width() / 2) - ($("#over_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
            if (top < 0) {
                top = 0
            }
            if (left < 0) {
                left = 0
            }
            if ($.browser.msie && parseInt($.browser.version) <= 6) {
                top = top + $(window).scrollTop()
            }
            if ($.browser.msie && parseInt($.browser.version) <= 6) {
                left = left - 175
            }
            $("#over_container").css({
                top: top + "px",
                left: left + "px"
            });
            $("#popup_overlay").height($(document).height())
        },
        _show: function(title, content, defaulevalue, type, callback) {
            $.alerts._hide();
            $.alerts._overlay("show");
            $("body").append(‘<div id="popup_container" style="display:none"><h1 id="popup_title"></h1><span id="popup_close"></span><div id="popup_content"><div id="popup_message"></div></div></div>‘);
            if ($.alerts.dialogClass) {
                $("#popup_container").addClass($.alerts.dialogClass)
            }
            var i = ($.browser.msie && parseInt($.browser.version) <= 6) ? "absolute" : "fixed";
            $("#popup_container").css({
                position: i,
                zIndex: 99999,
                padding: 0,
                margin: 0
            }).show();
            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            if (type != "openBox") {
                $("#popup_message").text(content).html($("#popup_message").text().replace(/\n/g, "<br />"))
            }
            $("#popup_container").css({});
            $.alerts._reposition();
            $.alerts._maintainPosition(true);
            switch (type) {
                case "alert":
                    $("#popup_message").after(‘<div id="popup_panel"><input type="button" value="‘ + $.alerts.okButton + ‘" id="popup_ok" /></div>‘);
                    $("#popup_ok").click(function() {
                        $.alerts._hide();
                        callback(true)
                    });
                    $("#popup_ok").focus().keypress(function(h) {
                        if (h.keyCode == 13 || h.keyCode == 27) {
                            $("#popup_ok").trigger("click")
                        }
                    });
                    break;
                case "confirm":
                    $("#popup_message").after(‘<div id="popup_panel"><input type="button" value="‘ + $.alerts.okButton + ‘" id="popup_ok" /> <input type="button" value="‘ + $.alerts.cancelButton + ‘" id="popup_cancel" /></div>‘);
                    $("#popup_ok").click(function() {
                        $.alerts._hide();
                        if (callback) {
                            callback(true)
                        }
                    });
                    $("#popup_cancel").click(function() {
                        $.alerts._hide();
                        if (callback) {
                            callback(false)
                        }
                    });
                    $("#popup_ok").focus();
                    $("#popup_ok, #popup_cancel").keypress(function(h) {
                        if (h.keyCode == 13) {
                            $("#popup_ok").trigger("click")
                        }
                        if (h.keyCode == 27) {
                            $("#popup_cancel").trigger("click")
                        }
                    });
                    break;
                case "prompt":
                    $("#popup_message").append(‘<br /><input type="text" size="30" id="popup_prompt" />‘).after(‘<div id="popup_panel"><input type="button" value="‘ + $.alerts.okButton + ‘" id="popup_ok" /> <input type="button" value="‘ + $.alerts.cancelButton + ‘" id="popup_cancel" /></div>‘);
                    $("#popup_prompt").width($("#popup_message").width() - 10);
                    $("#popup_ok").click(function() {
                        var inputValue = $("#popup_prompt").val();
                        $.alerts._hide();
                        if (callback) {
                            callback(inputValue)
                        }
                    });
                    $("#popup_cancel").click(function() {
                        $.alerts._hide();
                        if (callback) {
                            callback(null)
                        }
                    });
                    $("#popup_prompt, #popup_ok, #popup_cancel").keypress(function(h) {
                        if (h.keyCode == 13) {
                            $("#popup_ok").trigger("click")
                        }
                        if (h.keyCode == 27) {
                            $("#popup_cancel").trigger("click")
                        }
                    });
                    if (defaulevalue) {
                        $("#popup_prompt").val(defaulevalue)
                    }
                    $("#popup_prompt").focus().select();
                    break;
            }
            $("#popup_close").click(function() {
                $.alerts._hide();
                if (callback) {
                    callback()
                }
            });
            if ($.alerts.draggable) {
                try {
                    $("#popup_container").draggable({
                        handle: $("#popup_title")
                    });
                    $("#popup_title").css({
                        cursor: "move"
                    })
                } catch (d) { }
            }
        },
        _hide: function() {
            $("#popup_container").remove();
            $.alerts._overlay("hide");
            $.alerts._maintainPosition(false)
        },
        _overlay: function(display) {
            switch (display) {
                case "show":
                    $.alerts._overlay("hide");
                    $("BODY").append(‘<div id="popup_overlay"></div>‘);
                    $("#popup_overlay").css({
                        position:
                    "absolute",
                        zIndex: 99998,
                        top: "0px",
                        left: "0px",
                        width: "100%",
                        height: $(document).height(),
                        background: $.alerts.overlayColor,
                        opacity: $.alerts.overlayOpacity
                    });
                    break;
                case "hide":
                    $("#popup_overlay").remove();
                    break
            }
        },
        _reposition: function() {
            var top = (($(window).height() / 2) - ($("#popup_container").height() / 2)) + $.alerts.verticalOffset;
            var left = (($(window).width() / 2) - ($("#popup_container").width() / 2)) + $.alerts.horizontalOffset;
            if (top < 0) {
                top = 0
            }
            if (left < 0) {
                left = 0
            }
            if ($.browser.msie && parseInt($.browser.version) <= 6) {
                top = top + $(window).scrollTop()
            }
            $("#popup_container").css({
                top: top + "px",
                left: left + "px"
            });
            $("#popup_overlay").height($(document).height())
        },
        _maintainPosition: function(if_reposition) {
            if ($.alerts.repositionOnResize) {
                switch (if_reposition) {
                    case true:
                        $(window).bind("resize", $.alerts._reposition);
                        break;
                    case false:
                        $(window).unbind("resize", $.alerts._reposition);
                        break
                }
            }
        }
    };

    hiAlert = function(content, title, callback) {
        $.alerts.alert(content, title, callback)
    };
    hiConfirm = function(content, title, callback) {
        $.alerts.confirm(content, title, callback)
    };
    hiPrompt = function(content, defaulevalue, title, callback) {
        $.alerts.prompt(content, defaulevalue, title, callback)
    };
    hiOvershow = function(tips, seconds) {
        $.alerts.overShow(tips, seconds)
    }
})(jQuery);

html页面中调用：

<body>
<div id="main">
  <div class="demo" id="a1">
     1、警告框
  </div>
  <div class="demo" id="a2">
     2、确认框
  </div>
  <div class="demo" id="a3">
     3、输入框
  </div>
  <div class="demo" id="a5">
     4、提示条
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type=‘text/javascript‘ src=‘js/jquery-ui.min.js‘></script>
<script type="text/javascript" src="js/jquery.alert.js"></script>
<script type="text/javascript">
$(function(){
    $("#a1").click(function(){
        hiAlert("欢迎来到www.17sucai.com","提示");
    });
  
  $("#a2").click(function(){
    hiConfirm(‘你确认此操作吗?‘, ‘确认框‘, function(r) {
        hiOvershow(‘你的反馈是: ‘ + r);
    });
  });

    $("#a3").click(function(){
        hiPrompt(‘请填写:‘, ‘默认值‘, ‘输入框‘, function(r) {
            if( r ) hiOvershow(‘你填入的内容是"‘ + r+‘"‘);
        });
    });
  
    $("#a5").click(function(){
        hiOvershow(‘操作提示条信息‘,1500);
    });

});
</script>

代码写的很好。学习下。源码会上传文件。

文件名是：自己修改的alert.rar