jQuery模态对话框插件jAlert

jAlert是一款兼容ie8的jQuery模态对话框插件。jAlert可以实现模态对话框，弹出窗口，Lightbox 等，并且在显示对话框时带有炫酷的动画效果。

 

在线预览  下载

 使用方法

在页面中引入jQuery和jAlert.js、jAlert.css文件。

<link rel="stylesheet" href="dist/jAlert.css">

<script type="text/javascript" src="jquery.min.js"></script>                   

<script type="text/javascript" src="jAlert.js"></script>                   

 初始化插件

可以通过一个超链接来触发模态对话框。

<a href='#' data-jAlert data-title='New jAlert!' data-content='Great job!'>Click Me</a>

$(function(){

  $.jAlert('attach');

});

如果你不使用jAlert-functions.js，可以安装下面的方法来使用。

$.jAlert({ //this is the normal usage

    'title': 'Test',

    'content': 'Howdy',

    'theme': 'green',

    'size': 'xsm'

  });

如果你添加了jAlert-functions.js文件，可以简单的通过下面的方法实现一个对话框。

alert('hi'); //override is enabled by default

你还可以使用下面的方法来实现各种主题效果。

successAlert('Success', 'You did it!'); //green alert

errorAlert('Error', 'It didn\'t work!'); //red alert

infoAlert('Info', 'Information!'); //blue alert

warningAlert('Warning', 'Warning!'); //yellow alert

blackAlert('Warning', 'Warning!'); //black alert (obviously)

imageAlert('http://mydomain.com/myimg.jpg'); //optional second param is the image width (defaults to auto)

videoAlert('http://youtube.com/viddk35k');

ajaxAlert('http://mydomain.com/myfile.php'); //optional second param is onOpen callback which gets passed the instance of jAlert

iframeAlert('http://mydomain.com'); //optional second param is height (defaults to fill the viewport height)

 

confirm(function(){

  console.log('confirmed!');

}, function(){

  console.log('denied');

});

 

$.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://mysite.com'

});

 

$.jAlert({ //gets content from another file with $.get()

  'ajax': 'my-ajax-content.php'

});