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

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

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

使用方法
在页面中引入下面的文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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');
    }
     
});
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论