jquery bootstrap 彈出提示層外掛
阿新 • • 發佈:2018-12-22
/**
* 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('刪除');
}
});
});