popup div hide() when click anywhere else - jQuery

Question

I know there are quite a few posts about this question and I have tried few codes and thought it worked perfectly with mine but then I found out it only worked (hides) when I click on the same <div> that makes it pop and also when I click anywhere not within my #main <div>. So if I click anywhere within my #main <div>, my pop-up will just stay there. I have been looking at it for awhile and couldn't see why.

Can someone please give me an eye?

Edit: These are the codes I have.

my html where I have the select option and the colorSelectBox

<div class="color-side-a">
    <p class="sideABCD-header">Side A</p>
    <div class="dimension-width">
        <p class="dimension-WHC">Colors</p>
        <select name="number-of-colors" class="number-of-colors color-a">
            <option value="" group="1">Select A Number</option>
            <option value="1" group="1">1</option>
            <option value="2" group="1">2</option>
            <option value="3" group="1">3</option>
        </select>
        <div class="number-of-color-field">
            <div name="color1" class="sideA color1" data-semi="false"  data-coated="false"></div>
            <div name="color2" class="sideA color2" data-semi="false"  data-coated="false"></div>
            <div name="color3" class="sideA color3" data-semi="false"  data-coated="false"></div>
        </div>
    </div>
</div><!-- end color side A -->


<div class="colorSelectBox">
    <div>14 Guage Semi-Transparent</div>
    <div>
        <div class="azRed" value="#DD2A13" name="Aztec Red"></div>
        <div class="azYellow" value="#E5BC0A" name="Aztec Yellow"></div>
    </div>
    <div class="clear"></div>
    <div>18 oz Industrial Stength Viyl Coated</div>
    <div>
        <div class="yellow" value="yellow" name="yellow"></div>
        <div class="blue" value="blue" name="blue"></div>
        <div class="black" value="black" name="black"></div>
        <div class="brown" value="brown" name="brown"></div>
        <div class="grey" value="grey" name="grey"></div>
        <div class="green" value="green" name="green"></div>
        <div class="white" value="white" name="white"></div>
        <div class="orange" value="orange" name="orange"></div>
    </div>

this is what's in js

var colorHolder = null; //used to store the location where color is picked

/* Function checks which side's div is clicked and pop put the colorSelectBox with the position of the div popping out */
function colorFieldPicker(onClickSide,side){
    onClickSide.on('click', function(event){
        //store the class of the colorHolder to a global variable
        colorHolder = $(this).attr('class');
        var yVal = (event.clientY) + "px";
        var xVal = (event.clientX) + "px";
        $('.colorSelectBox').css({"left": xVal, "top": yVal}).toggle();
        //empty the field where it says 'Click to choose colors'
        $(this).closest('div').find('.gradient').children().empty();
        //var visible = $('.colorSelectBox').hasClass('visible');
        //if(visible){
        //    $('.colorSelectBox').hide();
        //    $('.colorSelectBox').removeClass('visible');
        //}else{
        //    $('.colorSelectBox').show();
        //    $('.colorSelectBox').addClass('visible');
        //}
        colorPickerOnClick(side);

    });
}
/* Function which then determine what color is clicked and return the color to the div selected as the div's background color */
function colorPickerOnClick(side){
    //semi colors on click
    $('div.azRed')
        .add('div.azYellow')
        .on('click', function(){
        var colorAttr = $(this).attr('value');
        var nameAttr = $(this).attr('name');
        var splitClass = colorHolder.split(" ");
        side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1])
            .css({"background": colorAttr, "border": "none"})
            .attr({"value": colorAttr, "data-semi": true, "data-coated": false, "name": nameAttr});
        $('.colorSelectBox').css({"display": "none"});
    });

    //coated color on click
    $('div.white').on('click', function(){
        var colorAttr = $(this).attr('value');
        var nameAttr = $(this).attr('name');
        var splitClass = colorHolder.split(" ");
        side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1])
            .css({"background": colorAttr, "border": "1px solid lightgrey"})
            .attr({"value": colorAttr, "data-semi": false, "data-coated": true, "name": nameAttr});
        $('.colorSelectBox').css({"display": "none"});
    });
}

The above is the original code and I have searched online and found this, which is also what Diego provided,

/*Makes the colorSelect hide when mouse clicked other places*/
$(document).mouseup(function (e) {
    var container = $(".colorSelectBox");

    if (!container.is(e.target) && container.has(e.target).length === 0){
        container.hide();
    }
});

The code above works well but what I really want is when I click on the certain div the box pop up and the box will be gone when I click on the same div again or anywhere outside of the box. The code above only works perfectly when I click anywhere outside the box but if I click on the div that makes it pop up the box would only change position to my mouse position. I tried adding / removing class as it is now commented out in my code and can be seen above, it works but still have problem because when I click anywhere outside the box, the class for the box will not remove and so I added that removing class into the code above that if anywhere outside of the box is clicked the class will be removed. But that doesn't work.

Thanks in advance for any help.

Answer 1

I got kind of lucky and I think I found your jQuery code for hiding the colorbox div.

    $(document).click(function (e) {
        if ($(e.target).closest('.colorSelectBox').length > 0 || $(e.target).closest('div').length > 0) return;
        $('.colorSelectBox').hide();
    });

The reason it won't hide it, is because of the second condition:

$(e.target).closest('div').length > 0

It basically says, if the element clicked is a child of a div or a div then don't hide it. Since you have divs everywhere it will always return that function and never hide. I don't know what you were trying here.

Answer 2

Replace the $(document).click function at line:690 with this:

$(document).mouseup(function (e) {
  var container = $(".colorSelectBox");

  if (!container.is(e.target) && container.has(e.target).length === 0)
  {
      container.hide();
  }
});

Check this question: Use jQuery to hide a DIV when the user clicks outside of it