Displaying bootstrap modal window as browser notification

Question

I have developed a reminder application and I want to show a reminder to the user in form of a notification/popup/modal-window consisting a form, irrespective of what tab user is using in the browser.

As a response to this notification, user clicks to acknowledge or snooze the notification which closes the modal, just like in Facebook notifications.

Ps: Any alternate idea to show reminder to user with form and implement snooze button? will highly appreciate.

score 0 · Answer 1 · answered Jul 13 '15 at 10:10

0

I would have added a common div in every page:

<div id="notif"></div>

When the notification is fetched by Ajax, I would set the resulting notif in the div and the use JQuery UI dialog box to display it like so:

$( "#notif" ).dialog();

The dialogue would look like so:

enter image description here

Here is the link to jquery dialog

answered Jul 13 '15 at 10:10

Ahs N

8,233
1
28
33

i am doing the same thing for showing but there isnt any option for close in all tabs as i asked in my question – hy_sultani Jul 13 '15 at 10:24
You mean you don't get the close button for the dialog? – Ahs N Jul 13 '15 at 10:26
i got a close button. i want when i close dialog from tab then automatically same dialog close from other tabs – hy_sultani Jul 13 '15 at 10:31
If so, then I would suggest you to keep track of the tab state. That is, whenever it has focus or not: `$(window).on("focus", function(){});`. Then display the dialog only if the window has focus. This would prevent the dialog from showing on the pages the user is not looking at. – Ahs N Jul 13 '15 at 10:36
I think [this post](http://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active) might help you keeping track of active tabs. – Ahs N Jul 13 '15 at 10:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/83110/discussion-between-hy-sultani-and-ahs-n). – hy_sultani Jul 13 '15 at 10:40

score 0 · Accepted Answer · answered Aug 13 '15 at 05:56

<div class="modal fade" id="ordernotifications-modal" tabindex="-1" role="dialog" aria-labelledby="ordernotifications-modal">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
               <h2 class="modal-title pcConv-title">New Order Notificaitons</h2>
           </div>
           <div class="modal-body notifications-modal-body">
               <div class="onotify-body">

               </div>
           </div>
        </div>
     </div>
   </div>

jQuery:

$.ajax({
        type     : "GET",
        url      : "{!! URL::to('your-route') !!}",
        success  : function(data) {
          if (data > 0){
            $.titleAlert("Title!", {
                requireBlur:false,
                stopOnFocus:false,
                duration:4000,
                interval:700
            });
            $('#ordernotifications-modal').modal('show');
            // $('#playSound')[0].play();
            $( ".onotify-body" ).load( "{!! URL::to('your-route') !!}");
          }
        }
      });

Displaying bootstrap modal window as browser notification

2 Answers2