This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Message Box

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

?
1
2
3
4
5
6
7
<!-- DC Message Box CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/message_box/css/dc_message_box.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Message Box JS -->
<script type="text/javascript" src="dcodes/message_box/js/jquery.cookie.js"></script>
<script type="text/javascript" src="dcodes/message_box/js/dc_message_box.js"></script>

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

?
1
2
3
4
5
6
7
<!-- DC Message Box CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/message_box/css/dc_message_box.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Message Box JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/message_box/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/message_box/js/dc_message_box.js"></script>

Focused background

Success! Event completed successfully.

x

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

Warning! 5mb space remaining.

x

Handy Tip: Press Win-L to lock windows.

x

Notify: Lock down all systems prior to logout.

x

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DC Message Box Start -->
  <div class="dc_message_box1 dc_focused_bg success closeable">
    <p><strong>Success!</strong> Event completed successfully.</p>
  </div>
  <div class="dc_message_box1 dc_focused_bg error">
    <p><strong>Error!</strong> Event did not complete. (Dialog not closable)</p>
  </div>
  <div class="dc_message_box1 dc_focused_bg warning closeable">
    <p><strong>Warning!</strong> 5mb space remaining.</p>
  </div>
  <div class="dc_message_box1 dc_focused_bg tip closeable">
    <p><strong>Handy Tip:</strong> Press Win-L to lock windows.</p>
  </div>
  <div class="dc_message_box1 dc_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.

x

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

Warning! 5mb space remaining.

x

Handy Tip: Press Win-L to lock windows.

x

Notify: Lock down all systems prior to logout.

x

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DC Message Box Start -->
  <div class="dc_message_box1 dc_simple_bg success closeable">
    <p><strong>Success!</strong> Event completed successfully.</p>
  </div>
  <div class="dc_message_box1 dc_simple_bg error">
    <p><strong>Error!</strong> Event did not complete. (Dialog not closable)</p>
  </div>
  <div class="dc_message_box1 dc_simple_bg warning closeable">
    <p><strong>Warning!</strong> 5mb space remaining.</p>
  </div>
  <div class="dc_message_box1 dc_simple_bg tip closeable">
    <p><strong>Handy Tip: </strong> Press Win-L to lock windows.</p>
  </div>
  <div class="dc_message_box1 dc_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.

x

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

Warning! 5mb space remaining.

x

Handy Tip: Press Win-L to lock windows.

x

Notify: Lock down all systems prior to logout.

x

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DC Message Box Start -->
  <div class="dc_message_box1 dc_no_bg success closeable">
    <p><strong>Success!</strong> Event completed successfully.</p>
  </div>
  <div class="dc_message_box1 dc_no_bg error">
    <p><strong>Error!</strong> Event did not complete. (Dialog not closable)</p>
  </div>
  <div class="dc_message_box1 dc_no_bg warning closeable">
    <p><strong>Warning!</strong> 5mb space remaining.</p>
  </div>
  <div class="dc_message_box1 dc_no_bg tip closeable">
    <p><strong>Handy Tip: </strong> Press Win-L to lock windows.</p>
  </div>
  <div class="dc_message_box1 dc_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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- DC Message Box Start -->
  <div class="dc_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="dc_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="dc_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="dc_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="dc_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="dc_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="dc_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="dc_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="dc_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="dc_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