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

PetitQ 对话框/Tips 2019-6-13 2.17K 0 0

这是一款基于 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;

alert

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();
```
```
        }
```
```
      }
```
```
    }
```
```
  ]
```
```
});
```

confirm

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);
```
```
        }
```
```
      }
```
```
    }
```
```
  ]
```
```
});
```

prompt

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());

```
        }
```
```
      }
```
```
    }
```
```
  ]
```
```
});
```

notice

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: ''
```
```
 
```
```
})
```

dialog

```
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

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

已有 542 人购买

永久更新：
演示数据：
提取码：20jv

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

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

使用方法

alert

confirm

prompt

notice

dialog

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

相关文章

jQuery 弹出式 Tooltip 分享按钮插件

纯CSS3背景透明Speech Bubbles对话气泡

CSS3消息提示动画效果

发表回复取消回复

热销模板

对话框/Tips

使用方法

alert

confirm

prompt

notice

dialog

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复