jquery growl-notification实现消息提示弹出效果代码
代码语言:html
所属分类:弹出层
代码描述:jquery growl-notification实现消息提示弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Growl Notifications</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <style> body { font-family: 'Open Sans'; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/growl-notification-colored-theme.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/growl-notification-dark-theme.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/growl-notification-light-theme.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/growl-notification.min.js"></script> <body> <div class="container-fluid"> <div class="page-content__header"> <div> <h2 class="page-content__header-heading">Growl Notifications</h2> </div> </div> <div class="main-container"> <div class="row"> <div class="col-lg-2"> <div class="for-group"> <label for="notification-position">Choose Position</label> <select class="form-control" name="position" id="notification-position"> <option value="top-center" selected>Top Center</option> <option value="bottom-center" selected>Bottom Center</option> <option value="top-right" selected>Top Right</option> <option value="bottom-right">Bottom Right</option> <option value="top-left">Top Left</option> <option value="bottom-left">Bottom Left</option> </select> </div> </div> <div class="col-lg-2"> <div class="for-group"> <label for="close-timeout">Close Timeout</label> <select class="form-control" name="position" id="close-timeout"> <option value="0" selected>Disabled</option> <option value="1000">1 Sec</option> <option value="3000">3 Sec</option> <option value="5000">5 Sec</option> </select> </div> </div> <div class="col-lg-2"> <div class="for-group"> <label for="animation">Animation</label> <select class="form-control" name="position" id="animation"> <option value="none">None</option> <option value="slide" selected>Slide</option> <option value="fade">Fade</option> </select> </div> </div> <div class="col-lg-2"> <div class="for-group"> <label for="animation">Show Buttons</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="show-buttons"> <label class="custom-control-label" for="show-buttons">Yes/No</label> </div> </div> </div> <div class="col-lg-2"> <div class="for-group"> <label for="animation">Show Progress Bar</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="show-progress-bar"> <label class="custom-control-label" for="show-progress-bar">Yes/No</label> </div> </div> </div> </div> <div class="row mt-5"> <div class="col-lg-2"> <button id="show-notification-close-all" class="btn btn-danger">Close All Notifications</button> </div> </div> <h2 class="mt-5">Default Notifications</h2> <div class="row"> <div class="col-lg-6"> <button id="show-notification-default-simple" class="btn btn-secondary">Show me a notification (Default)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ description: 'I am a default notification.', }); // or (new GrowlNotification(options)).show();</code> </pre> <div class="row"> <div class="col-lg-6"> <button id="show-notification-default-alert" class="btn btn-secondary">Show me a notification (Default)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Hello!', description: 'I am a default notification.', type: 'alert', position: 'top-right', closeTimeout: 0 }); // or (new GrowlNotification(options)).show();</code> </pre> </div> <div class="col-lg-6"> <button id="show-notification-default-success" class="btn btn-outline-success">Show me a notification (Success)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Well Done!', description: 'You just submit your resume successfully.', type: 'success', position: 'top-right', closeTimeout: 0 });</code> </pre> </div> </div> <div class="row mt-4"> <div class="col-lg-6"> <button id="show-notification-default-error" class="btn btn-outline-danger">Show me a notification (Error)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Warning!', description: 'The data presentation here can be change.', type: 'error', position: 'top-right', closeTimeout: 0 });</code> </pre> </div> <div class="col-lg-6"> <button id="show-notification-default-warning" class="btn btn-outline-warning">Show me a notification (Warning)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Reminder!', description: 'You have a meeting at 10:30 АМ', type: 'warning', position: position, closeTimeout: closeTimeout });</code> </pre> </div> <!--<div class="col-lg-12"> <button id="show-notification-default-info" class="btn btn-info">Show me a notification (Info)</button> </div>--> </div> <div class="row mt-4"> <div class="col-lg-6"> <button id="show-notification-default-info" class="btn btn-outline-purple">Show me a notification (Info)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Sorry!', description: 'Could not complete your transaction.', image: 'img/info.png', type: 'info', position: 'top-right, closeTimeout: 0 });</code> </pre> </div> </div> <h2 class="mt-5">Notifications with icons</h2> <div class="row"> <div class="col-lg-6"> <button id="show-notification-icon-alert" class="btn btn-secondary">Show me a notification (Default)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Hello!', description: 'I am a default notification.', type: 'alert', image: 'img/default.png', position: 'top-right', closeTimeout: 0 });</code> </pre> </div> <div class="col-lg-6"> <button id="show-notification-icon-success" class="btn btn-outline-success">Show me a notification (Success)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Well Done!', description: 'You just submit your resume successfully.', image: 'img/success.png', type: 'success', position: 'top-right', closeTimeout: 0 });</code> </pre> </div> </div> <div class="row mt-4"> <div class="col-lg-6"> <button id="show-notification-icon-error" class="btn btn-outline-danger">Show me a notification (Error)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Warning!', description: 'The data presentation here can be change.', image: 'img/danger.png', type: 'error', position: 'top-right', closeTimeout: 0 });</code> </pre> </div> <div class="col-lg-6"> <button id="show-notification-icon-warning" class="btn btn-outline-warning">Show me a notification (Warning)</button> <pre class="mt-4"> <code class="language-javascript">GrowlNotification.notify({ title: 'Reminder!', description: 'You have a meeting at 10:30 АМ', image: 'img/warning.png', type: 'warning', position: 'top-right', closeTimeout: 0 });</code> </pre> </div> </div> <div class="row mt-4"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0