jQuery弹窗对话框插件


源码介绍

简要教程

这是一款jQuery弹窗对话框插件。该jquery弹窗插件可以用于做提示框,对话框,确认框等,兼容ie8,并提供点击按钮后的回调函数调用方法,非常好用。

使用方法

在页面中引入jquery、jquery.dialog.js和dialog.css文件。

<link rel="stylesheet" href="dialog.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dialog.js"></script>
                
创建一个基本的对话框

一个基本的对话框的调用方法如下。

$.dialog({
  content: ''这是对话框的内容'
});
                
创建消息通知框

消息通知框有3个参数。

  • message:消息通知框显示的内容。
  • timeout:多少毫秒后自动关闭。
  • callback:关闭后的回调函数。
$.sendMsg('Notification Message', 3000, function(){
  alert('close')
});

// or
$.sendSuccess('Success Message', 3000, function(){
  alert('close')
});

$.sendWarning('Warning Message', 3000, function(){
  alert('close')
});

$.sendError('Error Message', 3000, function(){
  alert('close')
});

$.sendSuccessToTop('Sticky Success Message', 3000, function(){
  alert('close')
});

$.sendWarningToTop('Sticky Warning Message', 3000, function(){
  alert('close')
});          
                
创建确认框
$.sendConfirm({
  title: 'Confirm Dialog',
  msg: 'Are U Sure?',
  desc: 'Are U Sure to delete this entry?',
  button: {
    confirm: 'Okey',
    cancel: 'Cancel'
  },
  onConfirm: function() {
    console.log('Confirm');
  },
  onCancel: function() {
    console.log('Cancel');
  },
  onClose: function() {
    console.log('Close');
  }
});
                

配置参数

全局配置参数和默认值如下:

{
  id: '',
  title: 'Title',
  isFixed: true,
  hideHeader: false,
  hideClose: false,
  content: null,
  callback: null,
  withNoPadding: false, 
  withNoMinWidth: false,
  bgHide: true,
  escHide: true
}                 
                

对话框的默认配置参数如下:

{
  id: 'dialogConfirmBox',
  title: 'Confirm',
  hideHeader: false,
  hideClose: false,
  withCenter: false,
  withIcon: false,
  autoClose: false,
  timeout: 3000,
  width: null, 
  noconfirm: false,
  msg: '',
  desc: '', 
  content: '', 
  button: {
    confirm: 'Okey', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}
    cancel: 'Cancel', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}
    cancelFirst: false
  }
}          
                

该jQuery弹窗对话框插件的github网址为:https://github.com/springlong/jquery-dialog



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部