自定义jQuery浮动弹出框插件

浏览数：44 / 时间：2015年06月09日

自定义浮动弹出框使用说明

1. jquery.alert.js源代码如下：

(function($){
    var defaults = {
        width : 350, //浮动弹出框宽度
        height : 200, //浮动弹出框高度
        minWidth : 350, //浮动弹出框最小宽度
        minHeight : 200, //浮动弹出框最小高度
        fontFamily : "微软雅黑",//浮动弹出框内文字字体
        fontSize : "12px",//浮动弹出框内文字大小
        closeBtnStyle : {},//浮动弹出框"关闭"按钮样式
        confirmBtnStyle : {},//浮动弹出框"确认"按钮样式
        cancleBtnStyle : {},//浮动弹出框"取消"按钮样式
        title : "",//浮动弹出框标题
        titleStyle : {},//浮动弹出框标题样式
        innerHtml : "",//浮动弹出框内容
        container : "",//展示浮动弹出框的容器
        showBtns : true,//是否显示"确定"和"取消"按钮
        onCloseBtn : function(container){
　　　　　　container.html();
        },// 绑定点击"关闭"按钮事件(待拓展)
        onConfirmBtn : function(container){
　　　　　　container.html();
        },// 绑定点击"确定"按钮事件(待拓展)
        onCancleBtn : function(container){
　　　　　　container.html();
        }// 绑定点击"取消"按钮事件(待拓展)
    };
    
    var option_default = defaults;
    /**
     * 自定义浮动弹出框
     */
    $.fn.alert = function(options){
        var options = $.extend(defaults,options);
        _setting = options;
        $this = this;
        return this.each(function(){
        
            var $timer = new Date().getTime();
            var $container = _setting.container == "" ? $this : $(_setting.container);
            var $innerHtml = _setting.innerHtml == "" ? $container.html() : _setting.innerHtml;
            
            $container.hide();
            $container.html(_htmlTemplate(_setting,$innerHtml,$timer));
            _setStyle(_setting,$timer,$container);
            _postion($timer);
            $container.show();
        });
        
    };
    
    /** HTML模板 */
    var _htmlTemplate = function(options,innerHtml,timer){
        var htmlHeader = "<div id=‘jquery-alert-header-"+timer+"‘ style=‘width:350px;height:30px;line-height:30px;background-color:#0085D0;‘><div id=‘jquery-alert-title-"+timer+"‘ style=‘height:30px;display:inline-block;text-align:center;font-weight:bold‘>"+options.title+"</div><div id=‘jquery-alert-close-"+timer+"‘ style=‘width:30px;height:30px;line-height:30px;display:inline-block;float:right‘><input type=‘button‘ id=‘jquery-alert-closeBtn-"+timer+"‘ style=‘width:18px;height:18px;margin:auto;border:none;margin-top:6px;background-color:#0085D0;background-image:url(\"res/images/close.png\");cursor:pointer;‘ title=‘close‘/></div></div>";
        var htmlFooter = "<div id=‘jquery-alert-footer-"+timer+"‘ style=‘width:350px;height:30px;padding:10px 0;background-color:#fff;‘><input type=‘button‘ id=‘jquery-alert-confirmBtn-"+timer+"‘ value=‘确定‘ style=‘height:30px;line-height:30px;width:60px;border:none;background-color:#0085D0;color:#fff;cursor:pointer;‘/><input type=‘button‘ id=‘jquery-alert-cancleBtn-"+timer+"‘ value=‘取消‘ style=‘height:30px;line-height:30px;width:60px;margin-left:30px;border:none;background-color:#0085D0;color:#fff;cursor:pointer;‘/></div>";
        var htmlBody = "<div id=‘jquery-alert-body-"+timer+"‘ style=‘width:350px;height:120px;background-color:#F2F4FF‘>"+innerHtml+"</div>";
        return "<div id=‘jquery-alert-main-"+timer+"‘ style=‘min-width:350px;min-height:200px;width:350px;height:200px;margin:auto;text-align:center;z-index:1000;position: fixed;top:200px;left:542px;‘>"+htmlHeader+htmlBody+htmlFooter+"</div><div style=‘background: none repeat scroll 0% 0% #999999;width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 300;filter:alpha(opacity=50);-moz-opacity:0.50; opacity:0.50;‘></div>";
    };
    
    /** 设置CSS样式 */
    var _setStyle = function(options,timer,container){
        $("#jquery-alert-main-"+timer).width(options.width).height(options.height).css({"font-family":options.fontFamily,"font-size":options.fontSize});
        $("#jquery-alert-body-"+timer).width(options.width).height(options.height - 80);
        $("#jquery-alert-header-"+timer).width(options.width);
        $("#jquery-alert-footer-"+timer).width(options.width);
    
        $(‘#jquery-alert-title-‘+timer).css(options.titleStyle);
        $(‘#jquery-alert-closeBtn-‘+timer).css(options.closeBtnStyle);
        $(‘#jquery-alert-confirmBtn-‘+timer).css(options.confirmBtnStyle);
        $(‘#jquery-alert-cancleBtn-‘+timer).css(options.cancleBtnStyle);
        if(!options.showBtns){
            $("#jquery-alert-footer-"+timer).remove();
        }
        _bindEvents(options,timer,container);
    };
    
    /** 控制弹出框的相对定位(相对屏幕居中) */
    var _postion = function(timer){
        var a = $(window).width() - $("#jquery-alert-main-"+timer).width();
        var b = $(window).height() - $("#jquery-alert-main-"+timer).height();
        a = a >=0 ? a : 0;
        b = b >=0 ? b : 0;
        $("#jquery-alert-main-"+timer).css("top",Math.floor(b/2)+"px");
        $("#jquery-alert-main-"+timer).css("left",Math.floor(a/2)+"px");
    };
    
    /** 绑定各按钮点击事件 */
    var _bindEvents = function(options,timer,container){
        $(‘#jquery-alert-closeBtn-‘+timer).on(‘click‘,function(){
            onCloseBtn(container);
        });
        if(options.showBtns){
            $(‘#jquery-alert-confirmBtn-‘+timer).on(‘click‘,function(){
                onConfirmBtn(container);
            });
            $(‘#jquery-alert-cancleBtn-‘+timer).on(‘click‘,function(){
                onCancleBtn(container);
            });
        }
    };
    
})(jQuery);

2. 使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自定义浮动弹出框</title>
</head>
<body>
<div id=‘testalert‘></div>
</body>
<script type="text/javascript" src="res/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="res/js/jquery.alert.js"></script>
<script type="text/javascript" >
    $(function(){
        $("#testalert").alert({
            innerHtml : "自定义浮动弹出框内容",
            title : ‘自定义浮动弹出框Title‘,
            width : 650,
            height : 200,
            container : "#testalert"
        });
    });
</script>
</html>