How to close the popup in jquery

Question

I created a Popup in jquery. When mail icon is clicked it will open a popup which contains

Enter email - label Email -text box Send - Button close - button

When another icon called print icon is clicked it will open another popup with confirmation message "Are you sure u want to print" with Yes, No button.

When print icon is clicked the mail popup should close automatically and also vice versa.

The Snapshot is here

http://www.flickr.com/photos/41695354@N08/3864786560/

My code is here.

$("#idemail").live('click', function(event) {
        $(this).addClass("selected").parent().append();
        $(".mailpop").slideFadeToggle()
        $("#idemail").focus();
        return false;
    });

    $(".mailclose").live('click', function() {
        $(".mailpop").slideFadeToggle()
        $("#idemail").removeClass("selected");
        return false;
    });

    $("#idprint").live('click', function(event) {
        $(this).addClass("selected").parent().append();

        $(".printpop").slideFadeToggle()
        $("#idprint").focus();
    return false;
    });

    $(".printclose").live('click', function() {
        $(".printpop").slideFadeToggle()
        $("#idprint").removeClass("selected");
        return false;
    });

Please Help me

Answer 1

Is slideFadeToggle standard jQuery function? If not you could write two similar functions - one for slideFadeOpen and one for slideFadeClose and use them. Or check the visible state of the other popup and toggle it

$("#idprint").live('click', function(event) {
    $(this).addClass("selected").parent().append();

    $(".printpop").slideFadeToggle();

    if ( $(".mailpop").is(":visible")) {
       $(".mailpop").slideFadeToggle();
    }
    $("#idprint").focus();
return false;
});

Answer 2

I've never been a fan of 'toggle' in jQuery and would only ever consider using it to hide/show itself. Even then I just use standard hide and show methods. You might also wanna close off the calls to toggle with a semi colon...

Please wouldn't go amiss... I changed your toggle calls to a fadeIn/fadeOut and closed off the function calls with semi colons.

$("#idemail").live('click', function(event) {
    $(this).addClass("selected").parent().append();
    $(".mailpop").fadeIn("slow");
    $("#idemail").focus();
    return false;
});

$(".mailclose").live('click', function() {
    $(".mailpop").fadeOut("slow");
    $("#idemail").removeClass("selected");
    return false;
});

$("#idprint").live('click', function(event) {
    $(this).addClass("selected").parent().append();

    $(".printpop").fadeIn("slow");
    $("#idprint").focus();
return false;
});

$(".printclose").live('click', function() {
    $(".printpop").fadeOut("slow");
    $("#idprint").removeClass("selected");
    return false;
});