CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialogdom-events
espresso_coffee
espresso_coffee

Reputation: 6110

How to prevent modal box to close?

I have function that keeps track if user is active on the screen. Function is looking for mousedown and keydown events on body element. However this works fine if modal box showed on the screen and users session is still active (they can see the timer and button to extend the session). If their session expired there is message and link that will give them an option to move back to Login page. Once user session expires and they see the message with the link if they click anywhere on the page modal box is closed. I do not want modal box to close if session expired. I'm not sure why my function is not catching the step where I'm checking target element data-type attribute. Here is example of my function:

$('body').on('mousedown keydown', function(event) {
    var target = $(event.target);

    if(!target.is('a[data-type="sign_in"]')){
       lastActivity = new Date();
       if (dialogShowing){
          resetSessionTimeout(receiveUpdatedTimeRemaining);
       }
    }
 });

Code form my modal box:

function setupTimeoutDialog() {
        dmSessionBox.html('<div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h2 class="modal-title warning">Your session is about to expire</h2><h2 class="modal-title signedout">You have been signed out</h2></div><div class="modal-body"><div class="row warning"><div class="col-xs-2"><img src="lock1.png" id="imagepreview"></div><div class="col-xs-10">Click the Continue button to extend your session.</div></div><div class="row signedout"><div class="col-xs-2"><img src="lock2.png" id="imagepreview"></div><div class="col-xs-10"><a href="Login.cfm" data-type="sign_in">Return to sign in page</a></div></div></div><div class="modal-footer"><button type="button" id="continueButton" class="btn btn-primary" data-dismiss="modal">Continue</button></div></div></div>');

        window.onbeforeunload = null;
        dmSessionBox.find('#continueButton').on('click', function() {
            log('Continue button')
            lastActivity = new Date();
            resetSessionTimeout(receiveUpdatedTimeRemaining);
        });
    }

Some css that I use to show hide elements:

#sessiontimeoutwarning {
    display: none; 
}
#sessiontimeoutwarning .signedout { 
    display: none; 
}
#sessiontimeoutwarning.signedout .signedout { 
    display: block; 
}
#sessiontimeoutwarning.signedout .warning { 
    display: none; 
}

And on the end function that handles screen once session is expired:

function showBox(showIt) {
        showIt ? $('#sessiontimeoutwarning').modal('show') : $('#sessiontimeoutwarning').modal('hide'); 
    }

function showTimeoutErrorDialog() {
        setupTimeoutDialog();
        dmSessionBox.addClass("signedout").find('button').remove();
        showBox(true); //show modal box
        dialogShowing = true;
        $("#home-container").empty();

        $.ajax({
            type: 'POST',
            url: "Ajax call to close the session",
        }).done(function(){
            console.log('Session destroied.');
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Error: "+errorThrown);
        });
    }

I'm not sure why modal box is closing once session expires. It should stay up on the screen. Maybe something is in there that I'm not aware about Modal Bootstrap. If anyone see where my code is failing please let me know.

Upvotes: 0

Views: 1279

Answers (1)

Randy Casburn
Randy Casburn

Reputation: 14165

In order to prevent your Modal dialog from closing on mouse click on the backdrop (anywhere on the page) you must configure it using this configuration:

https://getbootstrap.com/docs/3.3/javascript/#modals-options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

So it seems as simple as adding data-backdrop="static" to your modal <div>

If you prefer to do this in code, then you can do this:

$(...).modal({
  backdrop:'static',
  show: false // or true if you want to show it right now
})

Edit

To address the condition (I didn't understand):

if user logged in, then allow modal to close on any click otherwise do not allow window to close.

It seems, given your code, the most reasonable place to accommodate this conditional would be in the showBox() function. Consider passing a second parameter to the function (or use some other source) that indicates if the user is logged in or not. Then:

function showBox(showIt, loggedIn) {
   let backdropClick = loggedIn ? true : 'static';
   let config = {backdrop: backdropClick, show: true}
   showIt 
     ? $('#sessiontimeoutwarning').modal(config) 
     : $('#sessiontimeoutwarning').modal('hide'); 
}

As one option.

Upvotes: 1

Related Questions