causeway-standard-theme/causeway/docs/components/site-notification.html

<div class="container page shell-left-navigation">
  <div class="navigation-pane-left">
    <div class="navigation-content-wrapper">
      <div class="navigation-header">
        <h2>Site Notifications</h2>
      </div>
      <div class="navigation-content">
        <div class="tree-view">
          <ul>
            <li onclick="window.Causeway.topNotification.show()"><a href="#">Notification</a></li>
            <li onclick="window.Causeway.topNotification.show({'autoClose':true, 'type': 'alert'})" class="system-alert"><a href="#">System Alert</a></li>
            <li onclick="window.Causeway.topNotification.show({'autoClose':true, 'type': 'success'})" class="system-success"><a href="#">Success Notification</a></li>
            <li onclick="window.Causeway.topNotification.show({'autoClose':true, 'type': 'cookie', message:'<strong>Cookie information: </strong> Lorem Ipsum'})"><a href="#">Cookie Notification</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="divider divider-navigation"><span class="handle"></span></div>
  <div class="navigation-pane-right">
    <div class="pane">
      <a id="site-notification"></a>
      <header class="content-header">
        <h1 class="title">Site Notifications</h1>
      </header>
      <p>Which color band to use?</p>
      <ul class="list-group">
        <li class="list-group-item" style="background-color: #6391e4; color: #fff;"><strong>Blue Band</strong>: To show different kinds of notification: Depending on the notification type, there will be a close button to remove the band or it might disappear after a designated time.
        <li class="list-group-item" style="background-color: #c0392b; color: #fff;"><strong>Red Band:</strong> To show system alerts (for e.g.: System Shutdown / Database Not Available etc). Note: This should not be used to display the form errors and validations. This will have a 'X' button to close the band.</li>
        <li class="list-group-item" style="background-color: #16a085; color: #fff;"><strong>Green Band:</strong> To show success messages. These will disappear after a designated time.</li>
      </ul>
      <br/>
      <h2 class="title">Usage</h2>
      <p>To display a site notification, a method of <code>Causeway</code> global object needs to be invoked.</p>
      <p><strong>Examples:</strong></p>
      <p>For normal(blue) site notification</p>
      <pre><code>
    Causeway.topNotification.show() // for showing

    Causeway.topNotification.hide() // for hiding
      </code></pre>
      <p>You can pass <code>Options</code> as an object to get various type of notifications.</p>
      <p>To show system alert - <code>Causeway.topNotification.show({'type':'alert'})</code></p>
      <p>To show success message - <code>Causeway.topNotification.show({'type':'success'})</code></p>
      <p><strong>Options</strong> that can be used:</p>
      <ul class="list-group">
        <li class="list-group-item"><strong>autoClose</strong> | boolean | default: false</li>
        <li class="list-group-item"><strong>duration</strong> | number in milliseconds | default: 5000</li>
        <li class="list-group-item"><strong>type</strong> | string: alert or success | default: normal blue band</li>
        <li class="list-group-item"><strong>message</strong> | string or html fragment: message | default: default type of message</li>
      </ul>
    </div>
  </div>
</div>