jQuery模态对话框插件jAlert
源码介绍
jAlert是一款兼容ie8的jQuery模态对话框插件。jAlert可以实现模态对话框,弹出窗口,Lightbox 等,并且在显示对话框时带有炫酷的动画效果。 在页面中引入jQuery和jAlert.js、jAlert.css文件。 可以通过一个超链接来触发模态对话框。 如果你不使用jAlert-functions.js,可以安装下面的方法来使用。 如果你添加了jAlert-functions.js文件,可以简单的通过下面的方法实现一个对话框。 你还可以使用下面的方法来实现各种主题效果。 该jQuery模态对话框插件的github地址为:https://github.com/VersatilityWerks/jAlert简要教程
使用方法
<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({ //this is the normal usage
'title': 'Test',
'content': 'Howdy',
'theme': 'green',
'size': 'xsm'
});
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模态对话框插件jAlert
发表评论 取消回复