anlinko
- 浏览: 41405 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
dl96200：
辛苦了。。感谢感谢 啊
dom读取xml与写入xml -
kaven1989：
太好了，楼主辛苦了
dom读取xml与写入xml -
osacar：
效果如何？性能？
java 生成缩略图
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery强大的模态对话框|消息框|Lightbox插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="fonts/font-awesome-4.3.0/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300|Bree+Serif" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<![endif]-->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/respond.js"></script>
<!-- PLUGIN -->
<script src="src/jAlert-v3.js"></script>
<script src="src/jAlert-functions.js"></script>
<link href="src/jAlert-v3.css" rel="stylesheet">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>jQuery强大的模态对话框|消息框|Lightbox插件 <span>A jQuery alert/modal/lightbox plugin</span></h1>
</header>
<div class="container">
<div class="tab-pane active" id="overview">
<h1 class="font-bree-serif align-center">The BEST jQuery Modal, Alert, Popup, Lightbox Plugin</h1>
<h4 class="align-center font-open-sans-normal-italic">jAlert is really easy, and really powerful! See why below:</h4>
<div class="row features">
<div class="span4">
<h3><i class="fa fa-expand"></i> Plenty-o Sizes</h3>
<p>Completely responsive (just under full width on small screens), but for tablets and desktops, you have a lot of control over how large the alert is.</p>
<a href='#' class='btn btn-primary jsize'>xsm</a>
<a href='#' class='btn btn-primary jsize'>sm</a>
<a href='#' class='btn btn-primary jsize'>md</a>
<a href='#' class='btn btn-primary jsize'>lg</a>
<a href='#' class='btn btn-primary jsize'>xlg</a>
<a href='#' class='btn btn-primary jsize'>full</a>
<script>
$('.jsize').on('click', function(e){
e.preventDefault();
var btn = $(this),
size = btn.text();
$.jAlert({
'title': 'Nice Size',
'content': 'This is the '+size+' sized alert',
'size': size,
'closeOnClick': true
});
return false;
});
</script>
</div>
<!--end span4-->
<div class="span4">
<h3><i class="fa fa-paint-brush"></i> Sweet Themes</h3>
<p>When used correctly, a user may not even need to read your message to know what it pertains to. Red alert = error. Green = success. You can use the default black background, or optional white one.</p>
<a href='#' class='btn btn-primary jtheme'>default</a>
<a href='#' class='btn btn-primary jtheme'>red</a>
<a href='#' class='btn btn-primary jtheme'>green</a>
<a href='#' class='btn btn-primary jtheme'>blue</a>
<a href='#' class='btn btn-primary jtheme'>yellow</a>
<a href='#' class='btn btn-primary jtheme'>black</a>
<script>
$('.jtheme').on('click', function(e){
e.preventDefault();
var btn = $(this),
theme = btn.text();
$.jAlert({
'title': 'Nice Theme',
'content': 'This is a '+theme+' alert',
'theme': theme,
'closeOnClick': true
});
return false;
});
</script>
<br>
<a href='#' class='btn btn-primary jtheme2'>default</a>
<a href='#' class='btn btn-primary jtheme2'>red</a>
<a href='#' class='btn btn-primary jtheme2'>green</a>
<a href='#' class='btn btn-primary jtheme2'>blue</a>
<a href='#' class='btn btn-primary jtheme2'>yellow</a>
<a href='#' class='btn btn-primary jtheme2'>black</a>
<script>
$('.jtheme2').on('click', function(e){
e.preventDefault();
var btn = $(this),
theme = btn.text();
$.jAlert({
'title': 'Nice Theme',
'content': 'This is a '+theme+' alert',
'theme': theme,
'closeOnClick': true,
'backgroundColor': 'white'
});
return false;
});
</script>
</div>
<!--end span4-->
<div class="span4">
<h3><i class="fa fa-picture-o"></i> Responsive Lightbox(es)</h3>
Need to show a video, image, iframe, or something fetched via AJAX? It's dead-simple and beautiful using jAlert:<br><br>
<a href='#' class='jimg btn btn-primary'>Image</a> <a href='#' class='jvid btn btn-primary'>Video</a> <a href='#' class='jframe btn btn-primary'>iFrame</a> <a href='#' class='jajax btn btn-primary'>AJAX</a>
<br><br>
<div style='font-size: 10px'>AJAX only works on a server, but if you view this locally, it'll give you an opportunity to see it fails with a nice error</div>
<script>
$('.jimg').alertOnClick({
'image': 'http://s2.quickmeme.com/img/c6/c676de4842e508242361c7a0aa2fe13a2e1191b58546d1554d5c128c404216d9.jpg',
'imageWidth': '100%',
'size': 'lg'
});
$('.jvid').alertOnClick({
'video': 'https://www.youtube.com/embed/u3oqwk6UmQI',
'size': 'lg'
});
$('.jframe').alertOnClick({
'iframe': 'https://nomoreagent.com',
'size': 'xlg'
});
$('.jajax').alertOnClick({
'ajax': 'ajax-dummy.html',
'size': 'sm'
});
</script>
</div>
<!--end span4-->
</div>
<!--end row-->
<div class="row features">
<div class="span4">
<h3><i class="fa fa-bolt"></i> CSS Animations</h3>
<p>In version 3, <a href='https://daneden.github.io/animate.css/' target='_blank'>Animate.css</a> was integrated.</p>
<a href='#' class='btn btn-primary janim' data-show='bounceIn' data-hide='bounceOut'>default</a>
<a href='#' class='btn btn-primary janim' data-show='fadeInDown' data-hide='fadeOutUp'>fade</a>
<a href='#' class='btn btn-primary janim' data-show='fadeInUp' data-hide='fadeOutDown'>fade</a>
<a href='#' class='btn btn-primary janim' data-show='flipInX' data-hide='flipOutX'>flip x</a>
<a href='#' class='btn btn-primary janim' data-show='flipInY' data-hide='flipOutY'>flip y</a>
<a href='#' class='btn btn-primary janim' data-show='zoomInDown' data-hide='zoomOutUp'>zoom</a>
<script>
$('.janim').on('click', function(e){
e.preventDefault();
var btn = $(this),
show = btn.data('show'),
hide = btn.data('hide');
$.jAlert({
'title': 'Awesome',
'content': "I'll close on my own..",
'showAnimation': show,
'hideAnimation': hide,
'closeOnClick': true,
'onOpen': function(alert)
{
setTimeout(function(){
alert.closeAlert();
}, 400);
}
});
return false;
});
</script>
<br><br>
These are just a few. Checkout <a href='https://daneden.github.io/animate.css/' target='_blank'>Animate.css</a> for the full list (must choose ones that hide/show the element).
</div>
<!--end span4-->
<div class="span4">
<h3><i class="fa fa-close"></i> Closing Options</h3>
<p>When it comes to closing jAlert, you have a few options (all of which can be disabled)</p>
<a href='#' class='btn btn-primary jtopr'>top-right btn</a>
<script>
$('.jtopr').alertOnClick({'title': 'Top-Right', 'content': 'Hit the button on the top-right corner to hide me'});
</script>
<a href='#' class='btn btn-primary jtopralt'>alt</a>
<script>
$('.jtopralt').alertOnClick({'title': 'Top-Right', 'closeBtnAlt': true, 'content': 'Hit the button on the top-right corner to hide me'});
</script>
<a href='#' class='btn btn-primary jesc'>esc key</a>
<script>
$('.jesc').alertOnClick({'title': 'Escape', 'content': 'Hit ESC to hide me'});
</script>
<a href='#' class='btn btn-primary janywhere'>anywhere</a>
<script>
$('.janywhere').alertOnClick({
'title':'Click somewhere!',
'content':'Clicking anywhere closes this alert!',
'closeOnClick': true
});
</script>
<a href='#' class='btn btn-primary jnone'>none</a>
<script>
$('.jnone').alertOnClick({'title': ':(', 'content': 'Gotta refresh to close this one.', 'closeBtn':false, 'closeOnClick': false, 'closeOnEsc': false});
</script>
</div>
<!--end span4-->
<div class="span4">
<h3><i class="fa fa-hand-o-up"></i> Buttons</h3>
<p>Additionally: With or without the background (btnBackground: boolean)</p>
<a href='#' class='btn btn-primary jbtn' data-theme='default'>default</a>
<a href='#' class='btn btn-primary jbtn' data-theme='red'>red</a>
<a href='#' class='btn btn-primary jbtn' data-theme='green'>green</a>
<a href='#' class='btn btn-primary jbtn' data-theme='blue'>blue</a>
<a href='#' class='btn btn-primary jbtn' data-theme='black'>black</a>
<script>
$('.jbtn').on('click', function(e){
e.preventDefault();
var btn = $(this),
theme = btn.data('theme');
$.jAlert({
'title':theme+' Button',
'content':'Wouldya look at that?',
'btns': [
{'text':'Close', 'theme':theme}
]
});
});
</script>
<br>
<a href='#' class='btn btn-primary jbtn2' data-theme='default'>default</a>
<a href='#' class='btn btn-primary jbtn2' data-theme='red'>red</a>
<a href='#' class='btn btn-primary jbtn2' data-theme='green'>green</a>
<a href='#' class='btn btn-primary jbtn2' data-theme='blue'>blue</a>
<a href='#' class='btn btn-primary jbtn2' data-theme='black'>black</a>
<script>
$('.jbtn2').on('click', function(e){
e.preventDefault();
var btn = $(this),
theme = btn.data('theme');
$.jAlert({
'title':theme+' Button',
'content':'Wouldya look at that?',
'btnBackground': false,
'btns': [
{'text':'Close', 'theme':theme}
]
});
});
</script>
<br>
</div>
<!--end span4-->
</div>
<!--end row-->
<div class="row features">
<div class="span4">
<h3><i class="fa fa-check"></i> Confirmation</h3>
<p>In version 3, a confirmation was added with callbacks for onConfirm and onDeny.</p>
<a href='#' class='btn btn-primary jconfirm'>confirm</a>
<script>
$('.jconfirm').on('click', function(e){
e.preventDefault();
confirm( function(){
successAlert('Confirmed');
}, function(){
errorAlert('Denied');
});
return false;
});
</script>
<br><br>
</div>
<!--end span4-->
<div class="span4">
<h3><i class="fa fa-retweet"></i> Easy Callbacks</h3>
<p>There are callbacks for: alert "onOpen", alert "onClose", alert "onAjaxFail", and btn "onClick".</p>
<a href='#' class='btn btn-primary jonopen'>onOpen</a>
<a href='#' class='btn btn-primary jonclose'>onClose</a>
<a href='#' class='btn btn-primary jonfail'>onAjaxFail</a>
<a href='#' class='btn btn-primary jonclick'>onClick</a>
<script>
$('.jonopen').alertOnClick({
'title':'onOpen',
'content': 'Hi there. Another alert should be above me that was triggered by the onOpen callback',
'onOpen': function(alertElem){
alert("It's Open!");
},
'theme': 'green',
'btns': {'text':'Yup, it did!', 'theme': 'green'}
});
$('.jonclose').alertOnClick({
'title':'onClose',
'content': 'Hi there. Another alert should be triggered by the onClose callback when you leave this',
'onClose': function(alertElem){
alert("It's Closed!");
},
'theme': 'green',
'btns': {'text':'Let\'s see!', 'theme': 'green'}
});
$('.jonfail').alertOnClick({
'title':'onAjaxFail',
'ajax': 'http://fsdjkfsdlk.com',
'onAjaxFail': function(alertElem){
alertElem.closeAlert();
alert("Ajax failed :(");
},
'theme': 'red',
'btns': {'text':'Ok'}
});
$('.jonclick').alertOnClick({
'title':'onClick',
'content': 'Click below',
'theme': 'blue',
'btns': {'text':'Sing to me', 'theme': 'blue', 'onClick': function(e, btn){
e.preventDefault();
alert('LA LA LA LA LA');
return false;
}}
});
</script>
<br>
</div>
</div>
<!--end row-->
<hr class="soften"/>
<!--end thumbnails-->
</div>
<!--end overview-content-->
</div>
</div>
</body>
</html>
- 大小: 14.9 KB
- 大小: 12.4 KB
- 大小: 10.6 KB
- 大小: 21.4 KB
- 大小: 14.8 KB
- jQuery强大的模态对话框消息框Lightbox插件.rar (483.9 KB)
- 下载次数: 0
分享到：
发表评论
-
html jquery li标签 选中
2021-10-31 09:36 560$('.j-d-list').find($(' ... -
jquery 全选反选 小实例
2018-11-09 11:49 480//判断checkbox集合中是否有选中的 ... -
jquery 动态增加table元素
2016-08-08 09:49 1407jsp页面 <%@ page language= ... -
div+css截取字符串在规定长度，超出部分用。。。代替
2016-01-19 19:54 559<!-- 表现层的问题需要表现层解决，不在服务器端提交处 ... -
CSS3实现关闭按钮
2015-12-17 11:40 1786<!doctype html> <ht ...
相关推荐
jAlert是一款功能强大的可以制作模态对话框、消息框、Lightbox的jQuery插件。这是第3个版本，在这个版本中集成了animate.css，大大提升了弹出对话框的动画效果。
jAlert是一款兼容ie8的jQuery模态对话框插件。jAlert可以实现模态对话框，弹出窗口，Lightbox 等，并且在显示对话框时带有炫酷的动画效果。
jQuery弹出层插件Sexy LightBox是一款漂亮动感的lightbox弹出层插件sexy lightbox 2.3。
内容索引:脚本资源,jQuery,ColorBox,jquery,模态对话框 jQuery Colorbox 是一款功能丰富的Html模态对话框插件，它不但拥有像LightBox盒子一样的功能，还有很多自定义功能和内置效果，可以满足你的设计需要。...
lightGallery是一款轻量级、可定制、响应式、模块化的jQuery LightBox图片画廊插件。它支持移动触摸设备，支持键盘控制，带20多种动画过渡效果，是一款非常优秀的LightBox插件。
这是一款使用jQuery和CSS3制作的图片画廊Lightbox插件。该lightbox插件中使用CSS3来为图片制作阴影和旋转效果，并使用jQuery来在点击图片的时候制作淡入淡出的图片放大效果。
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。
jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页
LC Lightbox是一款强大的图片画廊式jquery Lightbox插件。LC Lightbox采用响应式设计，功能强大，支持移动手机，支持缩略图等，是现代网页设计的首选lightbox插件。
jquery-lightboxjquery-lightboxjquery-lightboxjquery-lightboxjquery-lightboxjquery-lightbox
jQuery弹出层插件Sexy LightBox
jQuery Framer是一款非常好用的响应式多功能jQuery lightbox插件。该lightbox插件可以支持图片，Youtube视频，Vimeo视频，SoundCloud，Twitch，可以嵌入iframe，可以使用ajax调用内容，还可以播放HTML5视频文件。
slick-lightbox.js是一款基于slick.js和jquery的响应式弹出层lightbox插件。该jquery lightbox插件支持图片懒加载，支持键盘交互，支持HTML5 History API等。功能非常强大。
ColorBox是一款功能强大的轻量级jQuery Lightbox插件。ColorBox支持图片展示、图片分组、幻灯片、行内样式和iframe内容。该lightbox插件的兼容性极好，可以兼容IE7+的IE浏览器。
10个最佳jQuery Lightbox效果插件收集
jQuery轻量级响应式LightBox图片画廊插件源码 相册全屏查看且左右翻动.zip
这是一款效果非常炫酷的jQuery和CSS3图片画廊lightbox插件。该图片画廊插件以幻灯片和Lightbox的形式显示高清大图。插件中的动画都使用了CSS3过渡效果，并且该插件是响应式的。