这是一款基于 bootstrap4 封装的消息对话框组件。该消息组件包括 dialog,alert,confirm,input,success,error,notice。并且对话框支持鼠标或手指触摸拖拽。
在页面中引入下面的文件。
lt;link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.css"gt;
lt;link rel="stylesheet" href="./css/bs4.pop.css"gt;
lt;script src="js/jquery-2.1.1.min.js" type="text/javascript"gt;lt;/scriptgt;
lt;script src="bootstrap-4.0.0-dist/js/bootstrap.js"gt;lt;/scriptgt;
lt;script src="./js/bs4.pop.js"gt;lt;/scriptgt;
bs4pop.alert('Alert Dialog', function(){
console.log('You Just Clicked Okay Button');
},{
// options settings here
title: 'Alert Dialog',
hideRemove: true,
width: 500,
btns: [
{
label: 'Okay',
onClick(){
if(cb){
return cb();
}
}
}
]
});
bs4pop.confirm('Are You Sure?', function(sure){
console.log('Are You Sure:', sure);
},{
title: 'Confirmation Dialog',
hideRemove: true,
btns: [
{
label: 'Confirm',
onClick(){
if(cb){
return cb(true);
}
}
},
{
label: 'Cancel',
className: 'btn-default',
onClick(){
if(cb){
return cb(false);
}
}
}
]
});
bs4pop.prompt('Username:', 'Input Placeholder', function(sure, value){
console.log('I am:', value);
},{
title: 'Prompt Dialog',
hideRemove: true,
width: 500,
btns: [
{
label: 'Okay',
onClick(){
if(cb){
return cb(true, $input.val());
}
}
},
{
label: 'Cancel',
className: 'btn-default',
onClick(){
if(cb){
return cb(false, $input.val());
}
}
}
]
});
var myNofitication = bs4pop.notice('Notification Message', {
// primary, secondary, success, danger, warning, info, light, dark
type: 'primary',
// topleft, topcenter, topright, bottomleft, bottomcenter, bottonright, center
position: 'topcenter',
// append, prepend
appendType: 'append',
// shows close button
closeBtn: false,
// auto dismisses after 2 seconds
autoClose: 2000,
// CSS class
className: ''
})
var myDialog = bs4pop.dialog({
// dialog title
id: '',
// dialog title
title: '',
// dialog content: string, element, jQuery object
content: '',
// custom CSS class
className: '',
// width/height
width: 500,
height: '',
// parent container
target: 'body',
// shows close button
closeBtn: true,
// removes the dialog from the DOM after hidden
hideRemove: true,
// closes the dialog by pressing ESC key
escape: true,
// sets focus to the dialog on init
autoFocus: true,
// shows the dialog on init
show: true,
// shows backdrop
// true, false, static
backdrop: true,
// custom action buttons
// [{label: 'Button', className: 'btn-primary',onClick(cb){}}]
btns: [],
// enables draggable
drag: true,
// callback functions
onShowStart: function(){
// console.log('onShowStart');
},
onShowEnd: function(){
// console.log('onShowEnd');
},
onHideStart: function(){
// console.log('onHideStart');
},
onHideEnd: function(){
// console.log('onHideEnd');
},
onDragStart: function(){
console.log('onDragStart');
},
onDragEnd: function(){
// console.log('onDragEnd');
},
onDrag: function(){
console.log('onDrag');
}
});
Github 网址:https://github.com/aiv367/bootstrap4.pop
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!