How to make the modal close by clicking anywhere outside of the modal-window

Question

I'm currently working on this website.

and I would like to add extra function where users can close the modal (which could be opened at the top-right corner of the grey sub-header) by clicking anywhere except for the modal box.

Right now I can only close the modal when I click close at the top-right corner of the modal box or the black background.

How could I make this possible?

Answer 1

You can set bigger value of z-index to black overlay ( #modal-overlay ) to make it appear above other elements.

For test reasons you can test this code in console :

$('#modal-overlay').css('z-index', 10000);
$('#modal-name, #modal-movies').css('z-index', 10001);

Of course you should set it in CSS and choose more reasonable z-index values ;)