Bootstrap 弹窗JS组件封装
Bootstrap Modal弹窗组件封装 JS代码，方便调用
BootstrapDialog.js 组件源码
弹窗封装组件 BootstrapDialog.js 代码
JavaScript 全选
// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.
// Write your JavaScript code.
(function ($) {
window.GZDialog = function () {
var html = `<div class="modal fade" id="[Id]" tabindex="-1" aria-labelledby="[Title]" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">[Title]</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
[Message]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
<button type="button" class="btn [BtnOkClass] ok" data-dismiss="modal">[BtnOk]</button>
</div>
</div>
</div>
</div>`;
var alertHtml = `<div class="modal fade" id="[Id]" tabindex="-1" aria-labelledby="[Title]" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">[Title]</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
[Message]
</div>
<div class="modal-footer">
<button type="button" class="btn [BtnOkClass] ok" data-dismiss="modal">[BtnOk]</button>
</div>
</div>
</div>
</div>`;
var dialogdHtml = `<div class="modal fade" id="[Id]" tabindex="-1" role="dialog" aria-labelledby="[Title]" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">[Title]</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>`;
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var generateId = function () {
var date = new Date();
return 'mdl' + date.valueOf();
}
var init = function (options) {
options = $.extend({}, {
title: "操作提示",
message: "提示内容",
btnok: "确定",
btncl: "取消",
btnOkClass: "btn-primary",
width: 200,
auto: false
}, options || {});
var modalId = generateId();
var content = html.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title,
Message: options.message,
BtnOk: options.btnok,
BtnCancel: options.btncl,
BtnOkClass: options.btnOkClass
}[key];
});
$('body').append(content);
$('#' + modalId).modal({
width: options.width,
backdrop: 'static'
});
$('#' + modalId).on('hide.bs.modal', function (e) {
$('body').find('#' + modalId).remove();
});
return modalId;
}
return {
alert: function (options) {
if (typeof options == 'string') {
options = {
message: options
};
}
switch (options.type) {
case 'primary': {
options.btnOkClass = 'btn-primary';
} break;
case 'secondary': {
options.btnOkClass = 'btn-secondary';
} break;
case 'success': {
options.btnOkClass = 'btn-success';
} break;
case 'danger': {
options.btnOkClass = 'btn-danger';
} break;
case 'warning': {
options.btnOkClass = 'btn-warning';
} break;
case 'info': {
options.btnOkClass = 'btn-info';
} break;
case 'dark': {
options.btnOkClass = 'btn-dark';
} break;
}
console.log(options);
options = $.extend({}, {
title: "操作提示",
message: "提示内容",
btnok: "确定",
btncl: "取消",
btnOkClass: "btn-primary",
width: 200,
auto: false
}, options || {});
var modalId = generateId();
console.log(options);
var content = alertHtml.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title,
Message: options.message,
BtnOk: options.btnok,
BtnCancel: options.btncl,
BtnOkClass: options.btnOkClass
}[key];
});
debugger
$('body').append(content);
$('#' + modalId).modal({
width: options.width,
backdrop: 'static'
});
$('#' + modalId).on('hide.bs.modal', function (e) {
$('body').find('#' + modalId).remove();
});
var modal = $('#' + modalId);
//modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
modal.find('.cancel').hide();
return {
id: modalId,
on: function (callback) {
if (callback && callback instanceof Function) {
modal.find('.ok').click(function () { callback(true); });
}
},
hide: function (callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function (e) {
callback(e);
});
}
}
};
},
confirm: function (options) {
var id = init(options);
var modal = $('#' + id);
modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
modal.find('.cancel').show();
return {
id: id,
on: function (callback) {
if (callback && callback instanceof Function) {
modal.find('.ok').click(function () { callback(true); });
modal.find('.cancel').click(function () { callback(false); });
}
},
hide: function (callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function (e) {
callback(e);
});
}
}
};
},
dialog: function (options) {
options = $.extend({}, {
title: 'title',
url: '',
width: 800,
height: 550,
onReady: function () { },
onShown: function (e) { }
}, options || {});
var modalId = generateId();
var content = dialogdHtml.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title
}[key];
});
$('body').append(content);
var target = $('#' + modalId);
target.find('.modal-body').load(options.url);
if (options.onReady())
options.onReady.call(target);
target.modal();
target.on('shown.bs.modal', function (e) {
if (options.onReady(e))
options.onReady.call(target, e);
});
target.on('hide.bs.modal', function (e) {
$('body').find(target).remove();
});
}
}
}();
})(jQuery);使用方法：
1) 删除确认
JavaScript 全选
GZDialog.confirm({
message: "确认要将档案《" + sender.dataset.title + "》删除吗？",
title:'删除确认',
btnok: "删除",
btnOkClass: "btn-danger"
}).on(function (isOK) {
// 点击了取消按钮
if (isOK == false) {
return;
}
});效果
2) Alert弹窗
JavaScript 全选
GZDialog.alert(new {
message: '重建档案成功',
title: '操作成功',
type: 'success'
})参数：
- message：展示消息信息
- tiel：弹窗标题
- type：确认按钮主题 primary，secondary，success，danger，warning，info，dark
效果：
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
post 管理员
