I have create pull down modal with slideToggle but Toggle function not hiding the modal mask

I have pull down menu using slideToggle and I am adding some extra effect like mask on click pull down menu. I am showing modal kind of mask in background of the pull down menu. On click out side I开发者_开发百科 am hiding mask and pull menu is toggle and close (pull up). But I am not able to hide mask on click on .puller class second time my menu got toggle and pull up but background mask not hiding.

$(".puller").click(function() {
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    //transition effect     
    $('#mask').fadeTo("slow",0.6);  
    $(".patientDetail").slideToggle();
 });

 $('#mask').click(function () {
    $(this).fadeTo("fast",0);   
    $(this).hide("fast");
    $(".patientDetail").slideToggle();
 }); 

I have change the code as below its working fine

$(".puller").click(function() {
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    //transition effect     
    $('#mask').fadeTo("slow",0.6);  
    $(".patientDetail").slideToggle(function() {
          if($(this).is(":hidden")) {
         alert("this was a slide up");
       } 
     });
 });