Help with modal made with interactions

Design help Animations & Interactions
1

Hi! First off, thank you guys for the great product! It’s saved us a ton of time developing websites and from learning HTML/CSS/JS.

For the problem I’m running into, I’m trying to use interactions to make a complex overlay modal that should hide itself when you click on it. This works great just setting the entire overlay div with the interaction to remove itself. However, there is specifically one button in the overlay that if the user taps on it, I don’t want to run the interaction.

Is there any way to make that button an exception to the interaction, or is the only solution to tag every other object inside the overlay with the interaction?

Thanks!

2

I am wondering the exact same thing - I hoped maybe using a higher z-index on the content might work, to no avail.

3

#Not using interactions method:

You can add this code to Custom Code Section in the Site Dashboard in the second field called before </body>.

<script>
  $(document).ready(function() {
  	$('.modal-bg').click(function(e) {
  		e.preventDefault();
  		var target = $(e.target);
  		if(target.is('.that-non-closing-section')) {
  			// do whatever you want...
  		} else {
  			$('.modal-bg').fadeOut();
  		}
  	});
  });
</script>

The .modal-bg is the class of your modal popup.
The .that-non-closing-section is the thing that you don’t want to make your popup close.

4

Thanks @bartekkustra!

On // do whatever you want…, is there a null action that would basically amount to “Don’t do the else?” Maybe an “ignore click” event (or non-event, as the case may be)?

5

// is a comment for this particular line so jquery browser doesn’t execute this code at all. If there is nothing in there it won’t fo anything.

6

So having nothing there is equivalent to a null event? Thanks, did not know that.

7

Have you tried setting an “empty” interaction on this element?

8

Adding exceptions to block for interactions would be a useful feature. I agree with you.