jquery信息提示插件

初学jquery，尝试着制作一个小的插件，插件的css代码都写死了，没有另外的css文件。插件包含着找以及信息提示，还有一个关闭的X按钮，使用时可以指定按钮的位置（四个角）.

代码如下：

(function($) {
    $.fn.overlay = function(options) {
        var defaults = {
            // 遮罩透明度
            overlay_opacity : .6,
            // 遮罩的颜色
            overlay_backgroundColor : "gray",
            // 指定提示框的宽度
            dwidth : '',
            // 指定提示框的高度
            dheight : '',
            // 提示框距离上面像素
            dtop : '',
            // 提示框距离左面多少像素
            dleft : '',
            // 提示框的背景色
            dbackground : '#778899  ',
            // 提示框的透明度
            dopacity : .6,
            // 是否显示关闭按钮（这个默认为true，其实没有这个功能）
            closeButton : true,
            // 关闭按钮的方位
            closeButtonDirection : 'top_right',
            // 标题
            title : "信息提示",
            // 提示的主体信息
            context : ''
        };
        var zIndex = '1000';
        var opts = $.extend(defaults, options);
        // 创建以个遮罩层
        var overlay = $("<div id=\"overlay\"></div>");
        overlay.css({
            'visibility' : 'visible',
            'left' : '0px',
            'top' : '0px',
            'position' : 'absolute',
            'z-index' : zIndex,
            'zoom' : 1,
            'background' : opts.overlay_backgroundColor,
            'opacity' : opts.overlay_opacity,
            'width' : '100%',
            'height' : '100%'
        });
        // 将遮罩层添加到body上
        $('body').append(overlay);

        var win = $(window);
        // 窗口高度
        var winHeight = win.height();
        // 窗口宽度
        var winWidth = win.width();
        var dwidth, dheight;
        // 创建一个提示框
        var dialog = $("<div id=\"ovDialog\"></div>");
        /**
         * 提示框的大小设置
         */
        if (opts.dwidth == '' || typeof opts.dwidth == null) {
            dwidth = 300;
        } else {
            dwidth = parseInt(opts.dheight);
        }
        if (opts.dheight == '' || typeof opts.dheight == null) {
            dheight = 100;
        } else {
            dheight = parseInt(opts.dheight);
        }
        /**
         * 提示框的页面位置
         */
        var dtop, dleft;
        if (opts.dtop == '' || typeof opts.dtop == null) {
            dtop = (winHeight - dheight) / 2;
        } else {
            dtop = opts.dtop;
        }
        if (opts.dleft == '' || typeof opts.left == null) {
            dleft = (winWidth - dwidth) / 2;
        }
        dialog.css({
            'width' : dwidth,
            'height' : dheight,
            'position' : 'absolute',
            'top' : dtop,
            'left' : dleft,
            'z-index' : zIndex + 1,
            'background' : opts.dbackground,
            'opacity' : opts.dopacity,
            'border-radius' : '5px',
            'border' : 'solid 5px #708090'
        });
        /**
         * 提示框边框的颜色变换
         */
        dialog.mouseover(function() {
            $(this).css('border', 'solid 5px #DCDCDC');
        });
        dialog.mouseout(function() {
            $(this).css('border', 'solid 5px #708090');
        });

        // 创建关闭按钮
        var closeX = $("<div id=\"closeX\">X</div>")
        var cheight = dheight / 4;
        closeX.css({
            'position' : 'absolute',
            'background' : '#888888',
            'height' : cheight + 'px',
            'width' : cheight + 'px',
            'font-size' : cheight + 'px',
            'border-top-left-radius' : cheight / 2,
            'border-top-right-radius' : cheight / 2,
            'border-bottom-left-radius' : cheight / 2,
            'border-bottom-right-radius' : cheight / 2,
            'font-family' : '"微软雅黑", "宋体", Arial',
            'color' : '#DDDDDD',
            'z-index' : dialog.attr("z-index") + 1,
            'text-align' : 'center',
            'margin' : '0 auto',
            'vertical-align' : 'middle',
            'line-height' : cheight + 'px'
        });

        var po = dialog.offset();
        var left = po.left;
        var top = po.top;
        /**
         * 计算关闭按钮的位置
         */
        if (opts.closeButtonDirection == "top_right") {
            closeX.css({
                'top' : top - cheight / 2,
                'left' : left + dialog.width() - cheight / 2
            });
        }
        if (opts.closeButtonDirection == "top_left") {
            closeX.css({
                'top' : top - cheight / 2,
                'left' : left - cheight / 2
            });
        }
        if (opts.closeButtonDirection == "bottom_right") {
            closeX.css({
                'top' : top + dialog.height() - cheight / 2,
                'left' : left + dialog.width() - cheight / 2
            });
        }
        if (opts.closeButtonDirection == "bottom_left") {
            closeX.css({
                'top' : top + dialog.height() - cheight / 2,
                'left' : left - cheight / 2
            });
        }
        closeX.mouseover(function() {
            $(this).css({
                'background' : '#DCDCDC',
                'color' : '#333',
                'cursor' : 'pointer'
            });
        });
        closeX.mouseout(function() {
            $(this).css({
                'background' : '#888888',
                'color' : '#DDDDDD'
            });
        });
        dialog.append(closeX);
        $('body').append(dialog);
        // 创建显示table
        var table = $("<table id=\"contextTable\"><tr><td id=\"title\" align=\"left\"></td></tr><tr><td id=\"context\" align=\"center\"></td></tr></table>");
        table.css({
            'position' : 'absolute',
            'top' : top,
            'left' : left,
            'z-index' : dialog.attr("z-index") + 1
        });
        table.attr("style", "width:" + (dwidth - 20) + ";height:"
                + (dheight - 20) + "");
        dialog.append(table);
        $("#title").html(opts.title);
        $("#context").html(opts.context);

        /**
         * 对话框的拖动显示
         */
        var x, y;
        dialog.mousedown(function(e) {
            var offset = $(this).offset();
            x = event.clientX - offset.left;
            y = event.clientY + 20 - offset.top;
            $(this).mousemove(function(e) {
                xx = event.clientX - x;
                yy = event.clientY - y;
                $(this).css({
                    'left' : xx + "px",
                    'top' : yy + "px"
                });
                return false;
            });
        });

        dialog.mouseup(function(e) {
            $(this).unbind("mousemove");
            return false;
        });

        closeX.click(function() {
            dialog.css("display", "none");
            overlay.css("display", "none");
        });
    };

})(jQuery);

调用方式:

    <script type="text/javascript">
        $(document).ready(function(){
            $("").overlay({
                'context':'提示信息插件'
            });
        });
    </script>

插件在firefox下无法拖动，在chrome下可以

转载于:https://www.cnblogs.com/tatame/archive/2012/08/26/2657523.html