customizing the modal pop up layout

3
The current way model popups work, feels a bit awkward. (not being able to click the background to close, and the way the header looks) when i view the model popup in the modeler it is empty and just has the "main" in it. What am i doing wrong?  
asked
4 answers
5

I know I’m a bit late to this, but to close the modal popup on click of the underlay I was able to do this by using a hidden Close Page button with a class of “modal-close” and then put the HTML/JS snippet with jQuery selected and added:

 

$('.mx-underlay').click(function() {   $('.modal-close').click(); });

 

answered
3

How about using CSS to hide the built-in header? It has a class you can target: "mx-window-header". You can either style it or hide it. If you hide it. then you can implement whatever header you like in the pop-up layout itself.

Adding an on-click listener to the gray overlay is also probably relatively easy. The overlay itself gets the class "mx-overlay", so you can probably put an HTML/JavaScript snippet in the pop-up that add a click listener - something like this:

$(.mx-overlay).click(function() {
  this.mxform.close();
})

 

answered
1

underlay element isnt nested in the modal layout, meaning it cant be targeted in CSS without it being targetted globally.

Is there a widget that would extend the class of the modal layout to the underlying element?

 

answered
0

 

A "modal pop-up" (not model) means the pop-up is supposed the only thing working on your screen. Not sure what would be wrong with the header.

 

If you want to change the look-and-feel of the modal pop-up, I would look at applying CSS (e.g. change the header).

If you are unhappy with the behaviour associated with a modal pop-up, you could use a 'regular' pop-up instead.

answered