Akidus Akidus - 1 year ago 83
Javascript Question

Onclick outside of div, hide the div

I want to hide the div

when the user clicks out of the div named
. I can't get this to work, using this tutorial https://jsfiddle.net/KyleMit/tHCUB/ , for wherever I click, it says that it's outside the box.

$(".startBtn").click(function() {

$("body").clickOff(function() {

These last lines of code are the only that have changed from the javascript part in the jsfiddle.

I'm trying to make a menu, where you can click the menu button, to open it, and close it either by clicking the button again, or clicking out of the div. Right now, the alert pops up wherever I click. Ideas?


$(function() {
$(".startBtn").click(function() {
$.fn.clickOff = function(callback, selfDestroy) {
var clicked = false;
var parent = this;
var destroy = selfDestroy || true;

parent.click(function() {
clicked = true;

$(document).click(function(event) {
if (!clicked) {
callback(parent, event);
if (destroy) {
//parent.clickOff = function() {};
clicked = false;

$(".startBtn").click(function(event) {

$("body").click(function() {

/* effects.css */

#startBtn {
position: absolute;
transition: all ease 200ms;
#startBtn:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
#startBtnHvr {
display: none;
position: absolute;
transition: all ease 0ms;
.startBtn {
width: 64px;
height: 64px;
/* style.css */

body {
background-image: url("background.png") no-repeat center center fixed;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
h6 {
font-family: Tahoma, Geneva, sans-serif;
color: #333;
#startMnu {
display: none;
padding: 280px 180px;
background: linear-gradient(to bottom right, rgba(86, 11, 3, .8), rgba(4, 74, 100, .8));
/* Standard syntax */
float: left;
position: absolute;
border-radius: 1px;
border: 2px solid #333;
margin-left: -8px;
margin-top: 100px;


<title>Online OS</title>
<link rel="icon" type="image/png" href="ico_default.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="effects.js"></script>
<link href="effects.css" rel="stylesheet" type="text/css" id="sheet1">
<link href="style.css" rel="stylesheet" type="text/css" id="sheet1">

<img id="startBtn" class="startBtn" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/2000px-Circle_-_black_simple.svg.png" alt="" />
<img id="startBtnHvr" class="startBtn" src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/C/R/CR210.jpg" alt="" />
<div id="startMnu">
<h2 style=" float:left; position:absolute; margin-left:-95px; margin-top:-270px;" class="rename">Popup<h2>

This is what I mean, slight errors though in snippet.

Answer Source

Try this

$(".startBtn").click(function(event) {

$("#startMenu").click(function(event) {

$("body").click(function() {
#startMenu {
  background: red;
  height: 100px;
  width: 100px
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="startBtn">Menu</button>
<div id="startMenu">startMnu</div>