Open and Close on a single click Modal

I have created a dialog popup on click to show - I would like to click the same link to close the dialog popup:

Here is a working example: http://jsfiddle.net/zidski/4ASft/

Code below:

$(document).ready(function(){

    $('ul').each(function() {
        $(this).find('li').click(function() {
            var listItem = this;
            alert($(listItem).text());
        });
    });

    $('.activate_modal').click(function(){
       //get the id of the modal window stored in the name of the activating element       
       var modal_id = $(this).attr('name');
       //use the function to show it
       show_modal(modal_id);
    });

    $('.close_modal').click(function(){
        //use the function to close it
        close_modal();
    });
});

//THE FUNCTIONS
function close_modal(){
    //hide the mask
    $('#mask').fadeOut(500);
    //hide modal window(s)
    $('.modal_window').fadeOut(500);
}
function show_modal(modal_id){

    //set display to block and opacity to 0 s开发者_C百科o we can use fadeTo
    $('#mask').css({ 'display' : 'block', opacity : 0});
    //fade in the mask to opacity 0.8 
    $('#mask').fadeTo(500,0.8);
     //show the modal window
    $('#'+modal_id).fadeIn(500);
}

http://jsfiddle.net/Z5RH2/

$('#'+modal_id+',#mask').fadeToggle(500);

That should do it.

Here you go

http://jsfiddle.net/4ASft/2/

My solution: http://jsfiddle.net/4ASft/3/

$('.activate_modal').click(function(){
   //get the id of the modal window stored in the name of the activating element       
   var modal_id = $(this).attr('name');
   //use the function to show it or close it
    if($('#'+modal_id).is(":visible")) {
       close_modal(); 
    } else {
       show_modal(modal_id);
    }
    return false;
});

You can use jQuery's toggle event to switch between the two states.

http://jsfiddle.net/4ASft/4/

if($('#modal_id').is(':visible'))
  $('#modal_id').hide();
else
 $('#modal_id').show();
  return false;