1

I am using this tutorial to add a modal screen:

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

Everything works great except closing it. Rather than closing it via a button, I want to give the user the option to close it by clicking outside of the modal, i.e. in the background of the rest of the page behind it.

A user told me to add onclick='overlay()' to the overlay div like this <div id="overlay" onclick='overlay()'>

When I try to close the modal by clicking outside if it, it works, but it also closes if you click on the actual modal itself, which I don't want as it is a registration form. So is there any way to only close the modal by clicking outside of the actual modal itself?

Dave L.
  • 9,595
  • 7
  • 43
  • 69
Al Hennessey
  • 2,395
  • 8
  • 39
  • 63

2 Answers2

2

Try this:

$(document).ready(function(){
$('#overlay').bind('click', function(event){
    if (event.target == $('#overlay').get(0))
        overlay(); 
});
Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • Hi, sorry but i added and it did nothing when i tried to close it, i am not sure what i am doing wrong, thanks for your help though – Al Hennessey May 03 '12 at 22:39
  • Is your modal's content div inside the `overlay` div? It should work if so. – Fabrício Matté May 03 '12 at 22:42
  • I edited it slightly, try again with your original code and my `ready()` function. – Fabrício Matté May 03 '12 at 22:46
  • Maybe if you post some code, such as your HTML and JS we may be able to help you better. Both Musa's and my solution should work if nothing is interfering in your code. – Fabrício Matté May 03 '12 at 23:01
  • Ok, sorry, here is my code for my entire page, the only other code is an external file that holds the javascript for the overlay, but it is exactly the same as in the tutorial and what has been posted on this page, so i haven't changed any of that. - http://pastebin.com/5EZFD3CM – Al Hennessey May 03 '12 at 23:08
  • You're including 3 JQuery libs in your page, it's probably generating errors as `$` and `JQuery` would be defined already. Try including only 1 JQuery lib (preferably the most recent one). – Fabrício Matté May 03 '12 at 23:11
  • remove the `onclick='overlay_close()'` too – Fabrício Matté May 03 '12 at 23:16
  • ok i removed it but still does not close, i am confused, it is now exactly like the code you and musa provided, yet it still does not work – Al Hennessey May 03 '12 at 23:18
  • I don't see any reference to overlay() in your page except our close functions, I assume it's defined in the `scripts/modal_activate.js` but where do you call it in your page? – Fabrício Matté May 03 '12 at 23:20
  • Hi, yes the modal_activate holds the javascript for overlay, and it is called through a button in the main part of the page, i removed that part as the rest of the site is quite long, and i thought it wasn't really necessary, here is the code for calling the overlay in the first place - `
    `     – Al Hennessey May 03 '12 at 23:27
  • Try it now, got it working for your page. I'd suggest putting all your `.ready()` functions in a single one as well. – Fabrício Matté May 04 '12 at 00:09
  • Oh wow, that works great, thankyou so much for all you have done, if i can ask though why do you siggest putting all the .ready() into a single one? Just curious. Thanks again – Al Hennessey May 04 '12 at 17:47
  • Just for organizing purposes really, so you know everything that executes in the `.ready()` event easily instead of having multiple instances of it all over the document. Nevertheless, if it works as it is, there shouldn't be a problem. – Fabrício Matté May 04 '12 at 20:07
0

You will have to move the code of the the overlay from the modal window. Separating this, you will not have the overlay as a parent of the window and the click event will trigger only on the overlay.

<div id="overlay"> </div>
<div id="modalWindow">
    <p>Content you want the user to see goes here.</p>
</div>
Ricardo Souza
  • 16,030
  • 6
  • 37
  • 69
  • Hi, i just tried that now, and moved all the code from inside overlay underneath it, but all that appears is the semi transparent overlay and none of the actual modal code itself. – Al Hennessey May 03 '12 at 21:53
  • the `#overlay div` CSS won't work if you move the inner div outside of the `overlay` div. Rename `#overlay div` to `#modalWindow`. You'll also have to change the js function to hide the modalWindow as well. – Fabrício Matté May 03 '12 at 21:55
  • Hi, i have changed the name and also tried to change the javascript to also close it, but it is still not showing, all i am getting is the overlay display but not the actual modal_wrapper with all the content, any ideas? Thanks for your help – Al Hennessey May 03 '12 at 22:16
  • You included the `JQuery` tag in your question, so I'm assuming your page has the Jquery lib included right? If so I may try to find an easier solution which won't have to edit all your code. – Fabrício Matté May 03 '12 at 22:19
  • Hi, yes it does have the jquery library included as i have other elements which use it. – Al Hennessey May 03 '12 at 22:20