jQuery强大的模态对话框消息框Lightbox jAlert 插件 -

anlinko
浏览: 45567 次
性别:
来自: 深圳
最近访客更多访客>>

limengna845567
jiviang
私奔长安
无花果
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

jQuery强大的模态对话框消息框Lightbox jAlert 插件

博客分类：
JS
web前端
jquery html JavaScript
<!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>