anlinko
- 浏览: 43948 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
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 653$('.j-d-list').find($(' ... -
jquery 全选反选 小实例
2018-11-09 11:49 519//判断checkbox集合中是否有选中的 ... -
jquery 动态增加table元素
2016-08-08 09:49 1436jsp页面 <%@ page language= ... -
div+css截取字符串在规定长度，超出部分用。。。代替
2016-01-19 19:54 597<!-- 表现层的问题需要表现层解决，不在服务器端提交处 ... -
CSS3实现关闭按钮
2015-12-17 11:40 1822<!doctype html> <ht ...
相关推荐
"jQuery强大的模态对话框|消息框|Lightbox插件"就是为实现这些功能而设计的，比如jAlert插件。 jAlert是一款优秀的jQuery插件，专用于创建模态对话框和消息框。模态对话框是一种阻止用户与页面其余部分交互，直到...
**jQuery模态对话框插件jAlert** 在Web开发中，模态对话框是一种常见的交互元素，用于向用户展示重要信息或获取用户输入。jAlert是基于jQuery的一个轻量级插件，它允许开发者轻松创建功能丰富的模态对话框，支持...
**jQuery和CSS3图片画廊Lightbox插件详解** Lightbox是一种常见的网页设计技术，用于在用户点击小图后以全屏或半屏的方式显示大图，通常伴有过渡效果和阴影，提供更好的浏览体验。本插件巧妙地结合了jQuery库和CSS3...
jQuery弹出层插件Sexy LightBox是一款漂亮动感的lightbox弹出层插件sexy lightbox 2.3。
内容索引:脚本资源,jQuery,ColorBox,jquery,模态对话框 jQuery Colorbox 是一款功能丰富的Html模态对话框插件，它不但拥有像LightBox盒子一样的功能，还有很多自定义功能和内置效果，可以满足你的设计需要。...
《jQuery Lightbox：一款强大的图片弹出框插件》 jQuery Lightbox是一款广泛使用的JavaScript库，专门用于在网页上创建优雅的、响应式的图片和媒体查看器。它以轻量级、可定制和用户友好而著称，是网页设计师和...
zoomify.js是一款非常实用的jQuery图片放大预览Lightbox插件。zoomify.js可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。
lightGallery是一款轻量级、可定制、响应式、模块化的jQuery LightBox图片画廊插件。它支持移动触摸设备，支持键盘控制，带20多种动画过渡效果，是一款非常优秀的LightBox插件。
总之，Swipebox作为一款强大的jQuery Lightbox插件，通过提供全面的设备兼容性和丰富的功能，使得创建响应式、交互性强的图片和视频展示变得更加容易。开发者可以利用这个插件为用户创造更加引人入胜的Web体验。
**jQuery Lightbox插件详解** jQuery Lightbox是一款广泛使用的JavaScript插件，专为网页上的图片展示设计，它能够在用户点击图片链接时，弹出一个半透明的遮罩层，上面显示大图，提供了一种优雅的方式来展示网页中...
总之，jQuery的Lightbox插件是网页中展示图片集的一种高效且美观的方式，它结合了jQuery的强大功能和优雅的用户体验设计，使得开发者能够轻松地为网站添加高级的图片浏览功能。通过深入理解和运用Lightbox，你可以...
jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页
《jQuery弹出层插件Sexy LightBox深度解析》 在Web开发领域，jQuery以其简洁的API和强大的功能深受开发者喜爱。而Sexy LightBox，作为一款基于jQuery的弹出层插件，更是为网页增添了生动有趣的交互体验。本文将深入...
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浏览器。
在网页设计中，jQuery Lightbox效果插件是用于创建引人入胜的图像、视频和多媒体展示的重要工具。这些插件通常提供一个简洁且优雅的方式来显示全屏或弹出式的媒体内容，允许用户在不离开当前页面的情况下进行浏览。...