html-alert 电玩女神 2022-06-11 09:07 108阅读 0赞 作者：[LoveEmperor\_王子様][LoveEmperor] <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>html5消息提示框 | Growl-Style Scale</title> <meta name="description" content="Various styles and effects for unobtrusive notifications on a website" /> <meta name="keywords" content="notification, inspiration, style, effect, growl, javascript" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/ns-default.css" /> <link rel="stylesheet" type="text/css" href="css/ns-style-growl.css" /> <script src="js/modernizr.custom.js"></script> <!--\[if IE\]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <!\[endif\]--> </head> <body class="color-1"> <div class="container"> <header class="codrops-header"> <h1>html5消息提示框 <span>精美实用的消息提示框</span></h1> </header> <div class="main clearfix"> <div class="column"> <p class="small">点击按钮弹出提示框:</p> <button id="notification-trigger" class="progress-button"> <span class="content">显示提示框</span> <span class="progress"></span> </button> </div> <div class="column"> <nav class="codrops-demos"> <h3>Growl-like</h3> <div> <a class="current-demo" href="index.html">Scale</a> <a href="growl-jelly.html">Jelly</a> <a href="growl-slide.html">Slide in</a> <a href="growl-genie.html">Genie</a> </div> <h3>Attached</h3> <div> <a href="attached-flip.html">Flip</a> <a href="attached-bouncyflip.html">Bouncy Flip</a> </div> <h3>Top Bar</h3> <div> <a href="bar-slidetop.html">Slide On Top</a> <a href="bar-exploader.html">Expanding Loader</a> </div> <h3>Other</h3> <div> <a href="other-cornerexpand.html">Corner Expand</a> <a href="other-loadingcircle.html">Loading Circle</a> <a href="other-boxspinner.html">Box Spinner</a> <a href="other-thumbslider.html">Thumb Slider</a> </div> </nav> </div> </div> </div><!-- /container --> <script src="js/classie.js"></script> <script src="js/notificationFx.js"></script> <script> (function() \{ var bttn = document.getElementById( 'notification-trigger' ); // make sure.. bttn.disabled = false; bttn.addEventListener( 'click', function() \{ // simulate loading (for demo purposes only) classie.add( bttn, 'active' ); setTimeout( function() \{ classie.remove( bttn, 'active' ); // create the notification var notification = new NotificationFx(\{ message : '<p>This is just a simple notice. Everything is in order and this is a <a href="\#">simple link</a>.</p>', layout : 'growl', effect : 'scale', type : 'notice', // notice, warning, error or success onClose : function() \{ bttn.disabled = false; \} \}); // show the notification notification.show(); \}, 1200 ); // disable the button (for demo purposes only) this.disabled = true; \} ); \})(); </script> </body> </html> [LoveEmperor]: http://my.csdn.net/
还没有评论，来说两句吧...