Noty

Contents

Noty

Some settings and visual styles are also available in jquery.noty.theme.js. These are used for quick in-app, growl-type messages. Success includes a tick icon, others don’t.

  • You are awesome
<div id="notyContainer">
  <ul id="noty_inline_container">
    <li>
      <div class="noty_bar">
        <div class="noty_message">
          <span class="noty_text">You are awesome</span>
        </div><!--/noty_message-->
      </div><!--/noty_bar-->
    </li>
  </ul>
</div><!--/notyContainer-->

States

Success

  • You are awesome
<div id="notyContainer">
  <ul id="noty_inline_container">
    <li class="success">
      ...
    </li>
  </ul>
</div><!--/notyContainer-->

Error

  • You are awesome
<div id="notyContainer">
  <ul id="noty_inline_container">
    <li class="error">
      ...
    </li>
  </ul>
</div><!--/notyContainer-->

Warning

  • You are awesome
<div id="notyContainer">
  <ul id="noty_inline_container">
    <li class="warning">
      ...
    </li>
  </ul>
</div><!--/notyContainer-->

Confirm modal

Replace the browser javascript confirm windows.

  • Are you sure?
<div id="notyContainer">
  <ul id="noty_inline_container">
    <li class="confirm">
      <div class="noty_bar">
        <div class="noty_message">
          <span class="noty_text">Are you sure?</span>
        </div><!--/noty_message-->
        <div class="noty_buttons">
          <button class="btn btn-success">Delete</button>
          <button class="btn btn-link danger">Cancel</button>
        </div><!--/noty_buttons-->
      </div><!--/noty_bar-->
    </li>
  </ul>
</div><!--/notyContainer-->