Message Box

CSS/JS files (add code to <HEAD> section):


<!-- DC Message Box CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/message_box/css/tsc_message_box.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Message Box JS -->
<script type="text/javascript" src="dreamcodes/message_box/js/jquery.cookie.js"></script>
<script type="text/javascript" src="dreamcodes/message_box/js/tsc_message_box.js"></script>

          

Focused background

Success! Event completed successfully.

Error! Event did not complete. (Dialog not closable)

Warning! 5mb space remaining.

Handy Tip: Press Win-L to lock windows.

Notify: Lock down all systems prior to logout.

View code:


<!-- DC Message Box Start -->
  <div class="tsc_message_box1 tsc_focused_bg success closeable">
    <p><strong>Success!</strong> Event completed successfully.</p>
  </div>
  <div class="tsc_message_box1 tsc_focused_bg error">
    <p><strong>Error!</strong> Event did not complete. (Dialog not closable)</p>
  </div>
  <div class="tsc_message_box1 tsc_focused_bg warning closeable">
    <p><strong>Warning!</strong> 5mb space remaining.</p>
  </div>
  <div class="tsc_message_box1 tsc_focused_bg tip closeable">
    <p><strong>Handy Tip:</strong> Press Win-L to lock windows.</p>
  </div>
  <div class="tsc_message_box1 tsc_focused_bg neutral closeable">
    <p><strong>Notify:</strong> Lock down all systems prior to logout.</p>
  </div>
<!-- DC Message Box End -->

          

Simple background

Success! Event completed successfully.

Error! Event did not complete. (Dialog not closable)

Warning! 5mb space remaining.

Handy Tip: Press Win-L to lock windows.

Notify: Lock down all systems prior to logout.

View code:


<!-- DC Message Box Start -->
  <div class="tsc_message_box1 tsc_simple_bg success closeable">
    <p><strong>Success!</strong> Event completed successfully.</p>
  </div>
  <div class="tsc_message_box1 tsc_simple_bg error">
    <p><strong>Error!</strong> Event did not complete. (Dialog not closable)</p>
  </div>
  <div class="tsc_message_box1 tsc_simple_bg warning closeable">
    <p><strong>Warning!</strong> 5mb space remaining.</p>
  </div>
  <div class="tsc_message_box1 tsc_simple_bg tip closeable">
    <p><strong>Handy Tip: </strong> Press Win-L to lock windows.</p>
  </div>
  <div class="tsc_message_box1 tsc_simple_bg neutral closeable">
    <p><strong>Notify:</strong> Lock down all systems prior to logout.</p>
  </div>
<!-- DC Message Box End -->

          

No background

Success! Event completed successfully.

Error! Event did not complete. (Dialog not closable)

Warning! 5mb space remaining.

Handy Tip: Press Win-L to lock windows.

Notify: Lock down all systems prior to logout.

View code:


<!-- DC Message Box Start -->
  <div class="tsc_message_box1 tsc_no_bg success closeable">
    <p><strong>Success!</strong> Event completed successfully.</p>
  </div>
  <div class="tsc_message_box1 tsc_no_bg error">
    <p><strong>Error!</strong> Event did not complete. (Dialog not closable)</p>
  </div>
  <div class="tsc_message_box1 tsc_no_bg warning closeable">
    <p><strong>Warning!</strong> 5mb space remaining.</p>
  </div>
  <div class="tsc_message_box1 tsc_no_bg tip closeable">
    <p><strong>Handy Tip: </strong> Press Win-L to lock windows.</p>
  </div>
  <div class="tsc_message_box1 tsc_no_bg neutral closeable">
    <p><strong>Notify:</strong> Lock down all systems prior to logout.</p>
  </div>
<!-- DC Message Box End -->

          


Success! This is a success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Warning! This is a warning notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Quick Tip! This is a quick tip notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Error! This is a error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Secure Area! This is a secure area notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Info! This is a info notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Message! This is a message notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Download! This is a download notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Purchase! This is a purchase notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

Print! This is a print notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.

View code:


<!-- DC Message Box Start -->
  <div class="tsc_message_box2 success"> <span></span>
    <div class="text">
      <p><strong>Success!</strong> This is a success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 warning"> <span></span>
    <div class="text">
      <p><strong>Warning!</strong> This is a warning notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 tip"> <span></span>
    <div class="text">
      <p><strong>Quick Tip!</strong> This is a quick tip notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 error"> <span></span>
    <div class="text">
      <p><strong>Error!</strong> This is a error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 secure"> <span></span>
    <div class="text">
      <p><strong>Secure Area!</strong> This is a secure area notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 info"> <span></span>
    <div class="text">
      <p><strong>Info!</strong> This is a info notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 message"> <span></span>
    <div class="text">
      <p><strong>Message!</strong> This is a message notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 download"> <span></span>
    <div class="text">
      <p><strong>Download!</strong> This is a download notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 purchase"> <span></span>
    <div class="text">
      <p><strong>Purchase!</strong> This is a purchase notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
  <div class="tsc_message_box2 print"> <span></span>
    <div class="text">
      <p><strong>Print!</strong> This is a print notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
    </div>
  </div>
<!-- DC Message Box End -->

          


© TemplateAccess