1. 程式人生 > >jquery bootstrap 彈出提示層外掛

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('刪除'); } }); });