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

在线预览   下载

 

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

    }

     

});