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

Popup Notifications & Dialogs

Create popup message dialogs & notification bar alerts.

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

?
1
2
3
4
5
6
<!-- DC Popup Notifications CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/popup_notifications/css/dc_popup_notifications.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 Popup Notifications JS -->
<script type="text/javascript" src="dcodes/popup_notifications/js/dc_popup_notifications.js"></script>

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

?
1
2
3
4
5
6
<!-- DC Popup Notifications CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/popup_notifications/css/dc_popup_notifications.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 Popup Notifications JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/popup_notifications/js/dc_popup_notifications.js"></script>

Notification Alert Bar

Show: Top Notification
Show: Bottom Notification
Show: Notification (with close button)

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
<!-- DC Notification Alert Bar Start -->
<div class="dc_notificationbar_container">
<big>
    Show: <a href="#" id="dc_notification_custom_1" class="button">Top Notification</a><br />
    Show: <a href="#" id="dc_notification_custom_2" class="button">Bottom Notification</a><br />
    Show: <a href="#" id="dc_notification_custom_3" class="button">Notification (with close button)</a></big>            
</div>
<!-- DC Notification Alert Bar End -->
<!-- DC Notification Alert Bar Settings -->
<script>
    $("#dc_notification_custom_1").bar({
        color            : '#333',
        background_color : '#fffeec',
        position         : 'top',
        removebutton     : false,
        message          : '20% off everything sale!   <font size="1">(Auto close in 4 secs)</font>',
        time             : 4000
    });
         
    $("#dc_notification_custom_2").bar({
        color            : '#333',
        background_color : '#ccdeeb',
        position         : 'bottom',
        removebutton     : false,
        message          : 'Subscribe to our newsletter <u>today!</u>   <font size="1">(Click to close)</font>',
        time                : 60000
    });
         
         
    $("#dc_notification_custom_3").bar({
        message          : 'Our store will be closed during Christmas holidays.',
        removebutton     : true
    });
     
</script>

Popup Box

Open a popup box >> click here

View code:

?
1
2
3
4
5
6
7
8
9
10
<!-- DC Popup Dialog Start -->
<a href="javascript:popup('Lorem ipsum dolor sit amet, consectetur adipiscing elit.');">click here</a>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message"></div>
<a href="#" class="button">Close</a>
</div>
</div>
<!-- DC Popup Dialog End -->


© TemplateAccess