jQuery强大的模态对话框|消息框|Lightbox插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > jQuery强大的模态对话框|消息框|Lightbox插件
jQuery强大的模态对话框|消息框|Lightbox插件
分享:

    插件介绍

    jAlert是一款功能强大的可以制作模态对话框、消息框、Lightbox的jQuery插件。这是第3个版本,在这个版本中集成了animate.css,大大提升了弹出对话框的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-06-29
    阅读:
简要教程

jAlert是一款功能强大的可以制作模态对话框、消息框、Lightbox的jQuery插件。这是第3个版本,在这个版本中集成了animate.css,大大提升了弹出对话框的动画效果。它的特点有:

  • 响应式设计
  • 替换了默认的警告框,提示框,确认框
  • 6种预定义尺寸和主题样式
  • 支持AJAX,图片,iframe和视频

安装

使用jAlert插件要引入jQuery和jAlert-v3.css,以及jAlert-v3.min.js和jAlert-functions.min.js文件。

<link rel="stylesheet" href="jAlert-master/src/jAlert-v3.css">
<script src="js/jquery.min.js"></script>
<script src="jAlert-master/src/jAlert-v3.min.js"></script>
<script src="jAlert-master/src/jAlert-functions.min.js"></script> <!-- COMPLETELY OPTIONAL -->
              

使用方法

基本使用方法

下面的使用方法需要引入jAlert-functions.js文件。

// default alert popup 
alert('Hello World!');

// success
successAlert('Success', 'Hello World!');

// error
errorAlert('Error', 'Hello World!');

// info
infoAlert('Info', 'Hello World!'); 

// warning
warningAlert('Warning', 'Hello World!'); 

// black warning
blackAlert('Warning', 'Hello World!');

// image lightbox
imageAlert('1.jpg');

// video lightbox
videoAlert('http://youtube.com/...');

// ajax lightbox
ajaxAlert('external.html');

// iframe lightbox
iframeAlert('http://www.htmleaf.com');                
              
confirm(function(){
  console.log('confirmed!');
}, function(){
  console.log('denied');
});                
              
默认使用方法

以下的使用方法是jAlert默认的使用方法,不需要jAlert-functions.js文件。

$.jAlert({ //this is the normal usage
    'title': 'Test',
    'content': 'Howdy',
    'theme': 'green',
    'size': 'xsm'
  });                
              
$.fn.jAlert.defaults.backgroundColor = 'white'; //override a default setting

  $.fn.jAlert({ //same as $.jAlert when you're not passing an element - this alert will now have the white background color
    'title': 'Test',
    'content': 'Howdy',
    'theme': 'green',
    'size': 'xsm'
    //'backgroundColor': 'white' //you could also pass it here
  });

  $.fn.jAlert.defaults.backgroundColor = 'black'; //set it back to black                
              
$('.btn').alertOnClick({ //this function attaches an onclick handler to .btn and passes the options to jAlert
  'title': 'It worked!',
  'content': 'You clicked the button'
});                
              
$.alertOnClick('.btn', { //this function attaches an onclick handler to the body for .btn and kicks off jAlert
    'title': 'Like magic',
    'content': 'You clicked the button that was dynamically added'
});                
              
$.jAlert({ //creates a lightbox for the image - responsive and all
    'image': 'http://mysite.com/my-image.jpg'
});                
              
$.jAlert({ //creates a lightbox for the video - responsive and all
    'video': 'http://youtube.com/dflskd'
});                
              
$.jAlert({ //creates an alert that fills most of the height with a scrollable iframe
    'iframe': 'http://www.htmleaf.com'
});                
              
$.jAlert({ //gets content from another file with $.get()
    'ajax': 'my-ajax-content.php'
});                
              

配置参数

下面是jAlert的默认配置参数。

  • title:弹出窗口的标题,默认为false,即不带标题。
  • content:弹出窗口的内容。默认值为false。如果使用图片,ajax或iframe的话会替换这些内容。
  • image:添加一个居中的图片标签。默认值为false
  • imageWidth:默认的图片宽度。默认值max-width: 100%; width: auto;
  • video:添加一个响应式的iframe视频。默认值false
  • ajax:使用ajax回调获取内容。默认值为false
  • onAjaxFail:ajax调用失败时的回调函数。
    function(alert, errorThrown){
      alert.closeAlert();
      errorAlert(errorThrown);
    }  
    
  • iframe:使用iframe作为内容。默认值false
  • iframeHeight:弹出窗口中的iframe的高度。默认值为false,表示视口高度的90%。
  • class:为jAlert添加一个class,默认值为''
  • classes:为jAlert添加多个class,用空格隔开。默认值为''
  • id为jAlert添加一个ID,默认值为''
  • showAnimation:弹出窗口显示时的animate.css动画。默认值'bounceIn'
  • hideAnimation:弹出窗口隐藏时的animate.css动画。默认值'bounceOut'
  • animationTimeout:动画到窗口关闭的持续时间。默认值600。
  • theme。弹出窗口的主题。默认值:default。可选值:red, green, blue, black, default
  • backgroundColor:背景颜色。默认值'black'。可选项:white, black。
  • size:弹出窗口的尺寸。默认值false。表示默认的css样式尺寸。可选值:xsm, sm, md, lg, xlg, full, { height: 200, width: 200 }。
  • replaceOtherAlerts:是否在打开一个jAlert之前先关闭已经存在的jAlert窗口。默认值false
  • closeOnClick:是否在点击任意地方时关闭弹出窗口。默认值false
  • closeOnEsc:是否在按ESC键时改变弹出窗口。默认值true
  • closeBtn:在弹出窗口的右上角添加关闭按钮。默认值true
  • closeBtnAlt:替代关闭按钮。默认值false
  • btns:在弹出窗口底部添加按钮。默认值false。添加方法如下:
    'btns': [
        {'text':'Open in new window', 'closeAlert':false, 'href': 'https://www.baidu.com', 'target':'_new'},
        {'text':'Cool, close this alert', 'theme': 'blue', 'closeAlert':true},
        {'text':'Buy Now', 'closeAlert':true, 'theme': 'green', 'onClick': function(){ console.log('You bought it!'); } },
        {'text':'I do not want it', 'closeAlert': true, 'theme': 'red', 'onClick': function(){ console.log('Did not want it'); } },
        {'text':'DOA', 'closeAlert': true, 'theme': 'black', 'onClick': function(){ console.log('Dead on arrival'); } }
     ]
    
  • btnBackground:为按钮添加背景色。默认值true
  • autofocus:传入一个选择器会自动聚焦在该元素上。默认值false
  • onOpen:弹出窗口打开时的回调函数。
  • onClose:弹出窗口关闭时的回调函数。
  • type:弹出窗口的类型。默认值modal,可选值:modal, confirm, tooltip。

下面的参数仅在type == 'confirm'时可用。

'confirmQuestion': 'Are you sure?',
'confirmBtnText': 'Yes',
'denyBtnText': 'No',
'confirmAutofocus': '.confirmBtn', //confirmBtn or denyBtn
'onConfirm': function(e, btn){
  e.preventDefault();
  console.log('confirmed');
  return false;
},
'onDeny': function(e, btn){
  e.preventDefault();
  //console.log('denied');
  return false;
}