PopUp Menu close on blur

0
Hi, I'm using the PopUp menu in a project and now I have this requirement: The popup should be closed when the user leaves the popup area, basically when the blur event occurs. With the implementation in place the popup only closes when the user clicks again in the area used for opening it. Does anyone know how to achieve this? Because I looked at the documentation and I didn't found any reference/examples regarding this.
asked
2 answers
1

Hey Jose,

you need Html snippet widget -https://docs.mendix.com/appstore/widgets/html-javascript-snippet/, and you need to create button to close pop-up and hide that button from screen and add it following class buttonClosePage. Also inside Html snippet you need to add following JavaScript code.

var divs = document.querySelectorAll('div.mx-underlay');
divs.forEach(function(currentDiv) {
  currentDiv.addEventListener('click', function() {
    var closeButton = document.querySelector('div.buttonClosePage');
    if (closeButton) {
      closeButton.click();
    }
  });
});

Best regards, Slavko

answered
1

Ok, so based on your comment, I ended up adding a HTML snippet, with the following JQuery:

$(document).on('mouseleave', '.popupmenu-menu', function(){

$('.popupmenu-menu').hide();

 

});

$(document).on('mouseenter', '.popupmenu-trigger', function(){

$('.popupmenu-menu').show();

});

This seems to work just fine. :)

 

answered