0

I have a div which when clicked shows a contact us form . That is, on toggle it shows and hides. How can I make it to hide on clicking from other part of document.

The code is below

 function showCctFrm(){
    var frmWidth = '-40';

    $("#quick_cct_form").toggle(function(e){
        if($("#quick_cct_form").is(":visible")){ frmWidth = "200"; }
        if($("#quick_cct_form").is(":hidden")){ frmWidth = "-40"; }

        $("#fixed_cct_us").css("right",frmWidth+"px");
        //e.stopPropagation();
    });
    //alert(frmWidth);
}

I tried this to hide on clicked outside:

 $(document).click(function(e) {
  if(e.target.id != 'fixed_cct_us') {
    $("#quick_cct_form").hide();
    $("#fixed_cct_us").css("right","-40px");
  }
});

the HTML div for that is as below

<div id="fixed_cct_us" style="right: 240px;">
    <a title="connect" href="javascript: showCctFrm();">connect &nbsp;</a>
</div>
user2340612
  • 10,053
  • 4
  • 41
  • 66
NMN
  • 125
  • 9
  • http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it – Animesh Apr 14 '15 at 10:47

2 Answers2

0

UPDATE: Insert a quick DEMO.

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

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
        $("#fixed_cct_us").css("right","-40px");
    }
});
div {
  
  width: 500px;
  height: 150px;
  margin: 30px auto;
}

form {
  background: red; 
  width: 100%;
  height: 100%;
  color: white;
  padding: 10px;
}

input {
  margin: 20px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div>
<form id="quick_cct_form">
  Edit: <input type="text" placeholder="CustomerId" />
</form>  
</div>

The Snippet:

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

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
    }
});
kaito
  • 291
  • 2
  • 12
0
$('body').on('mouseup', function (e) {
  $("#quick_cct_form").hide();
  $("#fixed_cct_us").css("right","-40px");
  e.stopPropagation();
});

updated code below

$(document).on('mouseup', function (e) {
      $("#quick_cct_form").hide();
      $("#fixed_cct_us").css("right","-40px");
      e.stopPropagation();
    });

demo

evolutionxbox
  • 3,932
  • 6
  • 34
  • 51
ozil
  • 6,930
  • 9
  • 33
  • 56
  • didnt hide on clicked from outside :( – NMN Apr 14 '15 at 10:53
  • Outside where? If the body is being clicked and the target item is not the form, then the form should hide. Where are you clicking? – evolutionxbox Apr 14 '15 at 10:59
  • Now;the code $("#quick_cct_form").toggle(function(e){ if($("#quick_cct_form").is(":visible")){ frmWidth = "200"; } if($("#quick_cct_form").is(":hidden")){ frmWidth = "-40"; } $("#fixed_cct_us").css("right",frmWidth+"px"); //e.stopPropagation(); });is not working ;the toggle is only able to open the form not able to close the form – NMN Apr 16 '15 at 04:56