jQuery通用dialog/popup窗口插件

发布于: 2010-05-14 浏览: 4033 分类: Js/Css/jQuery

上网找了很久没找到这种实现多种样式窗口的插件，所以写了个通用dialog窗口的jquery插件，修改扩展自http://abeautifulsite.net/的dialog插件，总共包含帮助、Loading、提示、对话框。
由于时间和技术不足的关系，还有一些bug没解决，比如div模拟popup的功能（单击其他地方的时候自动隐藏），如果有高手有更好的解决方法的话欢迎指出。

效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery通用dialog/popup窗口插件</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <style type="text/css">
    *
    {
      padding:0;
      margin:0;
      font-size:13px;
    }
    a{
      color:#333;
    }
    ul li{
      height:25px;
    }
    /*------- Prompt Style -------*/
    .popup_prompt{
      border:1px solid #909090; 
      background:#FFF; 
    }
    .popup_prompt .popup_header{
    }
    .popup_prompt h1
    {
      height:25px;
      margin:1px;
      font-size:13px;
      color:#F4793A;
      font-weight:bold;
      text-indent:10px;
      padding-top:7px;
    }
    .popup_prompt .popup_content
    {
      margin:1px;
      padding:10px;
      font-size:13px;
    }
    .popup_prompt .buttonRow
    {
      height:30px;
      line-height:30px;
      text-align:right;
      margin:1px;
    }
    .popup_prompt input
    {
      color:#555;
      border:1px solid #808080;
      margin-right:5px;
      height:20px;
      line-height:18px;
      padding:0px 3px;
    }
    /*------- Tip Style -------*/
    .popup_tip
    {
      border:1px #684E02 solid;
      vertical-align:middle;
      filter:Alpha(Opacity=80);
      -moz-opacity:0.8;
    }
    .popup_tip .popup_content
    {
      color:#000;
      background:#FCFBE0;
      text-align:center;
    }
    .popup_tip img
    {
      vertical-align:middle;
    }
    /*------- Help Style -------*/
    .popup_help_up,.popup_help_down
    {
      width:271px;
      filter:Alpha(Opacity=85);
    }
    .popup_help_up
    {
      background:url(http://www.pc123.org/html/show/popup/imageshelp_t1.gif) left top no-repeat;
    }
    .popup_help_down
    {
      background:url(http://www.pc123.org/html/show/popup/imageshelp_t2.gif) left top no-repeat;
    }
    .popup_help_up a:link,.popup_help_down a:link
    {
      text-decoration:underline;
    }
    .popup_help_up .popup_header
    {
      margin-top:9px;
    }
    .popup_help_down .popup_header
    {
      margin-top:22px;
    }
    .popup_help_up .popup_header,.popup_help_down .popup_header
    {
      height:18px;
      border-left:1px #000 solid;
      border-right:1px #000 solid;
      background:#FFFFE1;
    }
    .popup_help_up .popup_header h1,.popup_help_down .popup_header h1
    {
      font-size:13px;
      text-indent:28px;
      background:url(http://www.pc123.org/html/show/popup/imagesaction.gif) 10px 0px no-repeat;
    }
    .popup_help_up .popup_content,.popup_help_down .popup_content
    {
      line-height:16px;
      padding:5px 10px;
      border-left:1px #000 solid;
      border-right:1px #000 solid;
      background:#FFFFE1;
    }
    .popup_help_up .popup_bottom
    {
      height:22px;
      background:url(http://www.pc123.org/html/show/popup/imageshelp_b1.gif) left top no-repeat;
    }
    .popup_help_down .popup_bottom
    {
      height:9px;
      background:url(http://www.pc123.org/html/show/popup/imageshelp_b2.gif) left top no-repeat;
    }
    </style>
    <script type="text/javascript">
    // jQuery Dialogs Plugin
    // Version 1.1
    // Cory S.N. LaViska (http://abeautifulsite.net/)
    // Edit by LinPanxing (http://www.91aspx.com/)
    //
    (function($) {
        $.popup = {
            ID: null,
            title: "",
            top: 0,
            left: 0,
            width: 0,
            height: 0,
            popType: "",
            repositionOnResize: false,          // 窗口调整大小后是否重新定位
            okButton: '确 定',                  // 确定按钮
            cancelButton: '取 消',              // 取消按钮
            isButtonRow: false,                  // 是否显示按钮
            isPopup: false,                      // 是否为popup窗口
            autoClose: 0,                       // 窗口自动关闭 (大于0时窗口自动关闭)
            // 公共方法
            tip: function(msg, top, left, autoClose) {
                this.ID = 'tip';
                this.popType = 'tip';
                this.title = '';
                this.isPopup = false;
                this.autoClose = autoClose || 0;
                this.width = 240;
                this.height = 30;
                this.top = top || ($(document).height() - this.height) / 2;
                this.left = left || ($(document).width() - this.width) / 2;
                $.popup._show(null, msg, null);
            },
            help: function(elem, title, msg, height) {
                this.ID = 'help';
                this.title = title || this.title;
                this.width = 271;
                this.height = height || 40;
                var top = $(elem).offset().top;
                if (top - 60 - this.height > 0) {
                    this.top = $(elem).offset().top - 60 - this.height;
                    this.popType = 'help_up';
                }
                else {
                    this.top = top + 16;
                    this.popType = 'help_down';
                }
                this.left = $(elem).offset().left - 30;
                $.popup._show(elem, msg);
            },
            prompt: function(elem, title, msg, isButtonRow, isPopup, callback, top, left, width, height) {
                this.ID = 'prompt';
                this.title = title || this.title;
                this.popType = 'prompt';
                this.isButtonRow = isButtonRow || this.isButtonRow;
                this.isPopup = isPopup || this.isPopup;
                this.top = top || $(elem).offset().top + 16;
                this.left = left || $(elem).offset().left;
                this.width = width || 300;
                this.height = height || 120;
                $.popup._show(elem, msg, function(result) {
                    if (callback) callback(result);
                });
            },
            // 私有方法
            _show: function(elem, msg, callback) {
                if ($("#_Popup_" + this.ID).length < 1) {
                    //$.popup._hide();
                    var html =
              '<div class="popup_' + this.popType + '" id="_Popup_' + this.ID + '" style="width:' + this.width + 'px">\
                      <div class="popup_header" id="_Title_"><h1>' + this.title + '</h1><div class="h_r"></div></div>\
                      <div class="popup_content">\
                        <div id="_Container_' + this.ID + (this.height == 0 ? '">' : '" style="height:' + this.height + 'px">') + msg + '</div></div>' +
                        (this.isButtonRow ? '<div class="buttonRow" id="_ButtonRow_' + this.ID + '"></div>' : '') +
                      '<div class="popup_bottom"><div class="b_r"></div>\
                    </div>';
                    $("BODY").append(html);
                    // IE6 Fix
                    //var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';
                    $("#_Popup_" + this.ID).css({
                        position: 'absolute',
                        zIndex: 100,
                        padding: 0,
                        margin: 0
                    });
                    $("#_Popup_" + this.ID).css({
                        minWidth: $("#_Popup_" + this.ID).outerWidth(),
                        maxWidth: $("#_Popup_" + this.ID).outerWidth()
                    });
                    $.popup._reposition();
                    $.popup._maintainPosition(true);
                    $.popup._bindType();
                    // Popup 窗口方法待测试
                    if (this.isPopup) {
                        $(elem).click(function(e) {
                            e ? e.stopPropagation() : event.cancelBubble = true;
                        });
                        $("#_Popup_" + this.ID).click(function(e) {
                            e ? e.stopPropagation() : event.cancelBubble = true;
                        });
                        $(document).click(function() {
                            $.popup._hide();
                        });
                    }
                    if (this.autoClose > 0) {
                        $.popup._autoClose();
                    }
                }
                else {
                    $("#_Container_" + this.ID).html(msg);
                    $.popup._bindType(callback);
                    $.popup._reposition();
                    $.popup._maintainPosition(true);
                    $("#_Popup_" + this.ID).show();
                    if (this.autoClose > 0) {
                        $.popup._autoClose();
                    }
                }
            },
            _bindType: function(callback) {
                switch (this.popType) {
                    case 'help':
                        if (this.isButtonRow) {
                            $("#_ButtonRow_" + this.ID).after('<input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '" />');
                            $("#_ButtonOK_" + this.ID).click(function() {
                                $.popup._hide();
                                callback(true);
                            });
                            $("#_ButtonOK_" + this.ID).keypress(function(e) {
                                if (e.keyCode == 13 || e.keyCode == 27) $("#_ButtonOK_" + this.ID).trigger('click');
                            });
                        }
                        break;
                    case 'prompt':
                        if (this.isButtonRow) {
                            $("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" />\
                            <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>\
                            <input type="button" value="' + $.popup.cancelButton + '" id="_ButtonCancel_' + this.ID + '"/>');
                            $("#_ButtonOK_" + this.ID).click(function() {
                                var val = $("#hid_" + this.ID).val();
                                $.popup._hide();
                                if (callback) callback(val);
                            });
                            $("#_ButtonCancel_" + this.ID).click(function() {
                                $.popup._hide();
                                if (callback) callback(null);
                            });
                            $("#_ButtonOK_" + this.ID + ", #_ButtonCancel_" + this.ID).keypress(function(e) {
                                if (e.keyCode == 13) $("#_ButtonOK_" + this.ID).trigger('click');
                                if (e.keyCode == 27) $("#_ButtonCancel_" + this.ID).trigger('click');
                            });
                        }
                        break;
                    case 'tip':
                        break;
                    default:
                        break;
                }
            },
            _hide: function() {
                if ($("#_Popup_" + this.ID).length > 0) {
                    if (this.popType == "tip") {
                        $("#_Popup_" + this.ID).fadeOut(500);
                    }
                    else {
                        $("#_Popup_" + this.ID).remove();
                    }
                    $.popup._maintainPosition(false);
                }
            },
            _autoClose: function() {
                setTimeout("$.popup._hide()", this.autoClose * 1000);
            },
            _reposition: function() {
                var top = this.top || (($(document).height() / 2) - ($("#popup_container").outerHeight() / 2));
                var left = this.left || (($(document).width() / 2) - ($("#popup_container").outerWidth() / 2));
                if (top < 0) top = 0;
                if (left < 0) left = 0;
                // IE6 fix
                //if ($.browser.msie && parseInt($.browser.version) <= 6) top = top + $(window).scrollTop();
                $("#_Popup_" + this.ID).css({
                    top: top + 'px',
                    left: left + 'px'
                });
            },
            _maintainPosition: function(status) {
                if ($.popup.repositionOnResize) {
                    switch (status) {
                        case true:
                            $(window).bind('resize', $.popup._reposition);
                            break;
                        case false:
                            $(window).unbind('resize', $.popup._reposition);
                            break;
                    }
                }
            }
        }
        // 显示Loading信息
        showLoading = function(msg, elem) {
            var loadingMsg = msg || '正在加载数据，请稍候...';
            if (elem == null) {
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                    '<td align="center"><img src="http://www.pc123.org/html/show/popup/imagesloading.gif" /> ' + loadingMsg + '</td></tr></table>', null, null, 0);
            } else {
                var middle = ($(elem).height() - 30) / 2;
                var top = $(elem).offset().top + (middle > 0 ? middle : 0);
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                     '<td align="center"><img src="http://www.pc123.org/html/show/popup/imagesloading.gif" /> ' + loadingMsg + '</td></tr></table>', top, null, 0);
            }
        }
        hideTip = function() {
            $("#_Popup_tip").fadeOut(500);
        }
        showTip = function(msg, elem, autoClose) {
            if (elem == null) {
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                    '<td align="center">' + msg + '</td></tr></table>', null, null, autoClose);
            } else {
                var middle = ($("#" + elem).height() - 50) / 2;
                var top = $("#" + elem).offset().top + (middle > 0 ? middle : 0);
                $.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                    '<td align="center">' + msg + '</td></tr></table>', top, null, autoClose);
            }
        }
        showHelper = function(elem, title, msg, height) {
            $.popup.help(elem, title, msg, height);
        }
        showPrompt = function(elem, title, msg, isButtonRow, isPopup, callback, top, left, width, height) {
            $.popup.prompt(elem, title, msg, isButtonRow, isPopup, callback, top, left, width, height);
        }
    })(jQuery);
    </script>
</head>
<body>
<div style="width:800px;margin:50px auto;">
<h3 style="height:30px;">jQuery通用dialog/popup窗口插件</h3>
  <ul>
    <li><a id="H01" href="#" onmouseover="showHelper('#H01', '帮助主题', '多个TAG标签用半角逗号隔开',30)" onmouseout="$('#_Popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在底下弹出）</a></li>
    <li><a id="H02" href="#" onmouseover="showHelper('#H02', '帮助主题', '多个TAG标签用半角逗号隔开',30)" onmouseout="$('#_Popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在头部弹出）</a></li>
  </ul>
  <ul>
    <li><a id="H11" href="javascript:showLoading()" title="查看帮助">显示Loading信息（默认）</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Loading信息</a></li>
    <li><a id="H12" href="javascript:showLoading('正在提交数据...')">显示自定义Loading信息（默认）</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Loading信息</a></li>
    <li><a id="H13" href="javascript:showLoading('正在加载列表数据...','#H13')">在指定容器内显示Loading信息（默认）</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Loading信息</a></li>
    <li><a id="H14" href="javascript:showTip('发表成功，经验 + 5')">显示提示信息</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Tip信息</a></li>
    <li><a id="H15" href="javascript:showTip('回复成功，经验 + 1',null,1)">显示提示信息（自动隐藏）</a></li>
  </ul>
  <ul>
    <li><a id="H21" href="javascript:showPrompt('#H21', '对话框', '自定义显示内容','callback')" title="查看帮助">对话框</a></li>
  </ul>        
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

效果演示：http://www.pc123.org/html/show/popup/index.html

前端开发者 2025-08-10 14:30

React 18的并发渲染确实是个重大改进，我们在项目中已经升级使用，性能提升明显！

jQuery通用dialog/popup窗口插件

评论

热门文章

文章分类