Results 1 to 3 of 3

Thread: How to close DIV, when clicked anywhere on the document/body?

  1. #1
    Join Date
    Mar 2013

    How to close DIV, when clicked anywhere on the document/body?

    I am a novice to JavaScript and jQuery so assistance is definitely needed... I basically have a few overlays that appear once a user clicks on a link within the page. You can close the overlay by clicking on the "X" link within the DIV, however I'd like for user's to be able to close the DIV by clicking anywhere on the screen. I'm sure its possible, yet I'm having a challenge implementing this functionality.

    Any help on this would be greatly appreciated!! Thanks.


  2. #2
    Join Date
    Mar 2011
    The Pleiades
    Can you post what code you have so far please?



  3. #3
    Join Date
    Mar 2013
    For example:


    if($(event.target).is('your modal window id')) {
    return false;

    //hide or close the overlay+modal function here


    As an explanation:

    The first function executes when anything gets clicked, if you have it set up like
    <overlay> <- darker fullscreen background
    <modal></modal> <- your little modal window

    You can replace "body" in the first function with your "overlay" object.

    It then checks if the clicked element is your modal window, if it is, do nothing. This prevents your whole overlay from closing/hiding if the visitor clicks on your modal window.

    After that simply insert a function that hides or deletes your overlay! Hope this helped!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center