jQuery .toggle() Modal show/hide dialog box

I've browsed some similar questions - but I've been looking forever and no luck finding an implementation that's the same as what I'm looking to do.

It's VERY simple:

<a class="contacttoggle" href="#">Contact</a>
<div>Lots of content between</div>
<div>Lots of content between</div>
<div>Lots of content between</div>
<div>Lots of content between</div>
<div class="contact_box">Contact info that is initially hidden and then fades in when the "contact_toggle" Contact link above is clicked</div>

I'm looking for this to fade in and it will be absolutely positioned on the page (no worries I can handle the CSS). I just DO NOT want a slide effect. Just fade in.

I feel like this code should work but it's not :(

$(documen开发者_JS百科t).ready(function(){


    /* function to show and hide main navigation conatct box */
    $(".contact_box").hide();

    $('a.contacttoggle').click(function() { 
        $(this).next("div").find(".contact_box").toggle(400);
        return false;
    }); 


})

What about fadeToggle?

Rather then toggle(), just animate() opacity with 'toggle'.

$(".contact_box").animate({opacity:'toggle'}, 400);

How about blockUI? It's one of those Plugins I really overuse.

Go to this link for more information: http://jquery.malsup.com/block/

Instead of

$(this).next("div").find(".contact_box").toggle(400);

Try

$("div.contact_box").toggle(400);