<!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>
