对话框/Tips

基于bootstrap4封装的消息对话框组件

阿里云


这是一款基于 bootstrap4 封装的消息对话框组件。该消息组件包括 dialog,alert,confirm,input,success,error,notice。并且对话框支持鼠标或手指触摸拖拽。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. lt;link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.css"gt;
  2. lt;link rel="stylesheet" href="./css/bs4.pop.css"gt;
  3. lt;script src="js/jquery-2.1.1.min.js" type="text/javascript"gt;lt;/scriptgt;
  4. lt;script src="bootstrap-4.0.0-dist/js/bootstrap.js"gt;lt;/scriptgt;
  5. lt;script src="./js/bs4.pop.js"gt;lt;/scriptgt;

alert

  1. bs4pop.alert('Alert Dialog', function(){ 
  2.   console.log('You Just Clicked Okay Button');
  3. },{
  4.   // options settings here
  5.   title: 'Alert Dialog',
  6.   hideRemove: true,
  7.   width: 500,
  8.   btns: [
  9.     {
  10.       label: 'Okay',
  11.       onClick(){
  12.         if(cb){
  13.           return cb();
  14.         }
  15.       }
  16.     }
  17.   ]
  18. });

confirm

  1. bs4pop.confirm('Are You Sure?', function(sure){ 
  2.   console.log('Are You Sure:', sure);
  3. },{
  4.   title: 'Confirmation Dialog',
  5.   hideRemove: true,
  6.   btns: [
  7.     {
  8.       label: 'Confirm',
  9.       onClick(){
  10.         if(cb){
  11.           return cb(true);
  12.         }
  13.       }
  14.     },
  15.     {
  16.       label: 'Cancel',
  17.       className: 'btn-default',
  18.       onClick(){
  19.         if(cb){
  20.           return cb(false);
  21.         }
  22.       }
  23.     }
  24.   ]
  25. });

prompt

  1. bs4pop.prompt('Username:', 'Input Placeholder', function(sure, value){ 
  2.   console.log('I am:', value);
  3. },{
  4.   title: 'Prompt Dialog',
  5.   hideRemove: true,
  6.   width: 500,
  7.   btns: [
  8.     {
  9.       label: 'Okay',
  10.       onClick(){
  11.         if(cb){
  12.           return cb(true, $input.val());
  13.         }
  14.       }
  15.     },
  16.     {
  17.       label: 'Cancel',
  18.       className: 'btn-default',
  19.       onClick(){
  20.         if(cb){
  21.           return cb(false, $input.val());
  22.         }
  23.       }
  24.     }
  25.   ]
  26. });

notice

  1. var myNofitication = bs4pop.notice('Notification Message', {
  2.  
  3.     // primary, secondary, success, danger, warning, info, light, dark
  4.     type: 'primary', 
  5.  
  6.     // topleft, topcenter, topright, bottomleft, bottomcenter, bottonright, center
  7.     position: 'topcenter', 
  8.  
  9.     // append, prepend
  10.     appendType: 'append', 
  11.  
  12.     // shows close button
  13.     closeBtn: false,
  14.  
  15.     // auto dismisses after 2 seconds
  16.     autoClose: 2000,
  17.  
  18.     // CSS class
  19.     className: ''
  20.  
  21. })

dialog

  1. var myDialog = bs4pop.dialog({
  2.  
  3.     // dialog title
  4.     id: '',
  5.  
  6.     // dialog title
  7.     title: '',
  8.  
  9.     // dialog content: string, element, jQuery object
  10.     content: '', 
  11.  
  12.     // custom CSS class
  13.     className: '',
  14.  
  15.     // width/height
  16.     width: 500,
  17.     height: '',
  18.  
  19.     // parent container
  20.     target: 'body',
  21.  
  22.     // shows close button
  23.     closeBtn: true, 
  24.  
  25.     // removes the dialog from the DOM after hidden
  26.     hideRemove: true,
  27.  
  28.     // closes the dialog by pressing ESC key
  29.     escape: true,
  30.  
  31.     // sets focus to the dialog on init
  32.     autoFocus: true,
  33.  
  34.     // shows the dialog on init
  35.     show: true,
  36.  
  37.     // shows backdrop
  38.     // true, false, static
  39.     backdrop: true,
  40.  
  41.     // custom action buttons
  42.     // [{label: 'Button', className: 'btn-primary',onClick(cb){}}]
  43.     btns: [],
  44.  
  45.     // enables draggable
  46.     drag: true,
  47.  
  48.     // callback functions
  49.     onShowStart: function(){
  50.       // console.log('onShowStart');
  51.     },
  52.  
  53.     onShowEnd: function(){
  54.       // console.log('onShowEnd');
  55.     },
  56.  
  57.     onHideStart: function(){
  58.       // console.log('onHideStart');
  59.     },
  60.  
  61.     onHideEnd: function(){
  62.       // console.log('onHideEnd');
  63.     },
  64.  
  65.     onDragStart: function(){
  66.       console.log('onDragStart');
  67.     },
  68.  
  69.     onDragEnd: function(){
  70.       // console.log('onDragEnd');
  71.     },
  72.  
  73.     onDrag: function(){
  74.       console.log('onDrag');
  75.     }
  76.  
  77. });

Github 网址:https://github.com/aiv367/bootstrap4.pop

基于 bootstrap4 封装的消息对话框组件

已有 471 人购买
  • 20jv
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!