jQuery强大的模态对话框|消息框|Lightbox插件-HTML源码网

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;
}