jquery bootstrap 弹出提示层插件

/**
*	boostrap-confirm.js v1.0  author: fengzy 
*/
;(function($,window,document,undefined){
  // var jconfirm, Jconfirm;
   
    //对外提供的方法
    $.alert = function (options) {
        return jconfirm(options);
    };
	$.confirm = function (options) {
		options.cancelButton = true;
		options.confirmButton = true;
        return jconfirm(options);
    };
	
	//参数配置
    var jconfirm = function (options) {
        var options = $.extend({}, jconfirm.defaults, options);
        return new Jobj(options);
    };
	
	//构造对象
    var Jobj = function (options) {
        $.extend(this, options);
        this.init();
    };
	
	//构造对象方法
    Jobj.prototype = {
        init: function () {
            var that = this;
            this.buildHTML();
            this.bindEvents();
        },
        buildHTML: function () {
           var that = this;
          
		   $(this.template).appendTo(this.container)

		  
        },
		bindEvents: function () {
			var that = this;
			
			
			//显示btn
			if(that.cancelButton){
				$("#confirmModal .jconfrim-cancel").show();
			}else{
				$("#confirmModal .jconfrim-cancel").hide();
			}
			
			//自动关闭
			if(this.autoClose){
			   this._startCountDown(this.autoClose);
		    }
			
			//回调
			if (that.confirmButton) {
				
				$("#confirmModal .jconfrim-submit").unbind( "click" );
                $('#confirmModal .jconfrim-submit').click(function (e) {
                    e.preventDefault();
                    var r = that.confirm();
                    if (typeof r === 'undefined' || r){
                        that.close();
					}
                });
            }else{
				$("#confirmModal .jconfrim-submit").unbind( "click" );
			}
			
			$("#confirmModal .modal-body").html(this.content);
			$('#confirmModal').modal('show');
		},
		_startCountDown: function (second) {
			var that = this;
			var time = second*1000;
						
			this.interval = setInterval(function () {
				$('#confirmModal .jconfrim-submit').trigger('click');
				clearInterval(that.interval);
			}, time);
		},
        close: function () {
			$('#confirmModal').modal('hide');
		}
    };

	//设置默认参数
    jconfirm.defaults = {
        template: 
		'<div class="modal fade" id="confirmModal" tabindex="1000" data-backdrop="false">'+
		   '<div class="modal-dialog" style="width:25%">'+
			  '<div class="modal-content">'+
				 '<div class="modal-body"></div>'+
				 '<div class="modal-footer">'+
					'<button type="button" class="btn btn-primary jconfrim-submit" data-dismiss="modal">确定</button>'+
					'<button type="button" class="btn jconfrim-cancel" data-dismiss="modal">取消</button>'+
				 '</div>'+
			  '</div>'+
			'</div>'+
		'</div>',
        title: 'Hello',
        content: 'Are you sure to continue?',
        icon: '',
        container: 'body',
		autoClose:'',
		confirmButton:false,
		cancelButton:false,
        confirm: function () {
        },
        cancel: function () {
        },
        contentLoaded: function () {
        }
    }
	
	
})(jQuery,window,document);

调用示例:
$("#button1").click(function(){
	$.alert({
		content: '请输入用户名'
	});		
});

$("#button2").click(function(){			

	$.confirm({
		content: '确认要删除吗?',
		confirm: function () {
			alert('删除');
		}
	});		
});

猜你喜欢

转载自blog.csdn.net/fzy629442466/article/details/84786336