Modal: Since you’ve been gone – Notific.io Tutorial 6
Creating a since you’ve been gone modal
This tutorial video explains the process of creating a since you’ve been gone modal in Notific.io.
You can find all the example codes below.
HTML
<li class="notific"> <a href="#"> <i class="fa fa-bell notific-bell"></i> <span class="notific-count"></span> </a> <div class="notific-popup"></div> </li>
CSS
.notific { position: relative; } .notific-bell { font-size: 1.5em; } .notific-count { display: none; font-size: 0.8em; line-height: 0.8em; color: white; background: red; padding: 3px; right: 0; bottom: 0; position: absolute; border-radius: 3px; } .notific-popup { display: none; position: absolute; top: 100%; right: 0; margin-top: 15px; padding: 10px; background: white; border-radius: 3px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); }
JavaScript
<script src="https://cdn.notific.io/[APP_ID].js"></script> <script> Notific.destroyButton(); Notific.destroyPopup(); Notific.enableSinceYouveBeenGone(); // Do something when count of unread notifications changes Notific.on('unread', function(count) { var el = document.querySelector('.notific-count'); el.innerHTML = count; el.style.display = count ? 'block' : 'none'; }); // Do something when notification panel closes Notific.on('close', function() { }); // Do something when notification panel opens Notific.on('open', function() { }); var popup = document.querySelector('.notific-popup'); var currentNotification = null; Notific.on('popup-open', function(notification) { popup.style.display = 'block'; popup.innerHTML = notification.title; currentNotification = notification; }); popup.addEventListener('click', function() { if (!currentNotification) { return; } Notific.view(currentNotification); popup.style.display = 'none'; currentNotification = null; }, false); // Toggle notification panel by clicking your custom button element document.querySelector('.notific').addEventListener('click', function(e) { Notific.toggle(e); }, false); <?php $secretKey = '[SECRET_KEY]'; // This data would normally come from your app's database $data = [ 'id' => '[USERS_ID_IN_YOUR_APP]', 'name' => '[USERS_NAME_IN_YOUR_APP]', 'email' => '[USERS_EMAIL_IN_YOUR_APP]' ]; ksort($data); $hmac = hash_hmac( 'sha256', json_encode($data), $secretKey ); $data['hmac'] = $hmac; ?> Notific.setUser(<?=json_encode($data)?>); </script>
This is the last video tutorial for Notific.io. The first one explains the basics of taking Notific.io into use.
-
Pingback: Notific.io 105 – Tutorial: Custom Notification popup - Notific.io
Read Next
Tutorial about how to customise the notification popup in Notific.io
Notifications in a nutshell In short, notifications are small informative messages. They can be displayed automatically when a triggering event occurs, or you can send them manually. Notifications come in many forms. When you are browsing through the internet and …