0

I used this question to hiding a modal after I clicked outside it.

$(document).mouseup(function (e)
{
    var container = $(".messenger");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }

});

In the comments, somebody rightfully said that you have to add something, if not you can't open the modal again after it has been hidden once

Remembering to use $("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument ); just beside .hide(). So document don't keep listening for clicks. – brasofilo

So I added a line

$(document).mouseup(function (e)
{
    var container = $(".messenger");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
        container.unbind( 'click', clickDocument );//THE LINE I ADDED
    }

});

But it does not work. If I click again the button, the modal does not reappear anymore.

Rookie in javascript. am I doing something wrong ?

EDIT

The script managing the opening of the modal is not custom. I use hubspot Messenger:

So I only write this code.

var msg;
msg = Messenger().post({
  message:      'this si message inside modal',
  hideAfter:    2500,
  showCloseButton: true,
  type: 'skip'
});
Community
  • 1
  • 1
Mathieu
  • 4,587
  • 11
  • 57
  • 112
  • can you please show the script handler that opens the container on click? – john Smith Feb 05 '16 at 16:46
  • it's handled by Hubspot Messenger library - http://github.hubspot.com/messenger/ so i did not write it myself. – Mathieu Feb 05 '16 at 16:50
  • 2
    Hiding would'nt be an appropriate way to close modals. There should be some way to trigger closing modal manually. You should use that – Batu.Khan Feb 05 '16 at 16:53
  • haha looked for it, but only found this. most literature talk about closing jquery UI modal dialogs which is not what I use. Open to suggestions. – Mathieu Feb 05 '16 at 16:56
  • just tried '.remove' instead of .hide. It really removes it from the DOM. Still the same problem: if I re-click on the button, the modal/alert does not appear any more. – Mathieu Feb 05 '16 at 16:59
  • just tried .empty and it worked now. Don't ask me why. Some conflicts with hubspot Messenger maybe. – Mathieu Feb 05 '16 at 17:02
  • Glad to see you got it working - I just wanted to mention that if you or anyone else is using Bootstrap modals and are having problems with them, here is a library that expands upon the basic Bootstrap Modals and fixes a lot of the quirks. I use the addon anytime that I build a Bootstrap site that is going to require Modals. https://github.com/jschr/bootstrap-modal – Korgrue Feb 05 '16 at 17:38

0 Answers0