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

该jQuery模态对话框插件的github地址为：https://github.com/VersatilityWerks/jAlert