首页 > 代码库 > 自定义jQuery浮动弹出框插件

自定义jQuery浮动弹出框插件

2024-08-06 05:23:38   221人阅读

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

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=http://www.mamicode.com/‘确定‘ style=‘height:30px;line-height:30px;width:60px;border:none;background-color:#0085D0;color:#fff;cursor:pointer;‘/>
"; 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>

这样就可以显示出自定义弹出框啦。

这个插件是为了满足项目中的小功能自己定制的，所以没有深究，其实还可以基于这个插件来拓展很多功能，时间仓促，难免会有些bug。如果有什么问题，欢迎大家指正。

自定义jQuery浮动弹出框插件


联系
我们