Click Outside Close Menu Box JavaScript CSS HTML Tutorial

hop over to here

Lesson Code:
In this JavaScript exercise we will demonstrate how to close specific things when a user clicks outside of them. You may have a drop down menu that you want to close when a user interacts with other things on the page. Or perhaps you have information windows that appear over content and you want to close them if the user clicks outside of them.


31 thoughts on “Click Outside Close Menu Box JavaScript CSS HTML Tutorial”

  1. I was trying to toggle display none and block ?? how can we do it on same button
    onclick="document.get.ElementById('box1').style.display='block' to convert toggle……………………. show or hide as in video

  2. sir it is not working when i had taken a table containing the registration form. when i had click on the input box the total form was vanished…. what to do …plz give a solution sir…

  3. Its agood tutorial…and i have done it succesfully thanx to u… and i have a doubt about the think that im using a homepage where i can click link for a gallery page.. so wat i want to do is go back to previous page on clicking outside the image… but after i tried many times its nt wroking properly.. i cant scrool through images on just clicking itslef takes me to previous page… plz help me with this

  4. Hey Adam I'm too late to comment but I've asked you in webintersect that Im having problem with the elements inside the box/div and you gave me some hints. But I wanna really do it in JS instead of jquery. All tutorials Im find are use Jquery.

  5. Hi Adam! I was wondering, I've included this code in the div id = "box"

    <div id = "box">
    <h2>Pop Out Interface</h2>
    <label>Search here: <input type = "search"></label>

    but then whenever I click on the input type, the pop-out interface closes. Any idea how to fix that?

  6. Hello,

    I have a "tutorial suggestion": it would be very handy to be able to use for example ms office to manipulate large datasets, in javascript. It would be really great if this data could be transformed into json.

    Do you take this challenge?

Leave a Reply

Your email address will not be published. Required fields are marked *