Close popup box before opening new one
<p>So I came across this thread and it works very well - <a href="http://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery">How to generate a simple popup using jquery</a>. However, I have a second link and I've changed the class name and everything. Works fine but there are two issues.</p>

<p>1 - If I click on one link and then decide to click on the other link, it displays the second div on top of the first one. If I click "Cancel," I end up having to close BOTH divs in succession. Not a big deal but I'm trying to make it idiot proof.</p>

<p>2 - If I click on "Add Room" and then happen to click on it again, then I can't click the "Cancel" button to hide the div overlay. I could display the div over the link so the user can't click it again, but it doesn't look as clean.</p>

<p>Here's the code.</p>

<pre><code>$(function() {
    $("#add_room").live('click', function(event) {                    
        $(this).addClass("selected").parent().append('&lt;div class="messagepop pop"&gt;&lt;form method="post" action="/room/add"&gt;&lt;label for="room"&gt;Room Name&lt;/label&gt;&lt;div class="field_span"&gt;&lt;input type="text" size="10" class="text" name="location_name" id="room" /&gt;&lt;/div&gt;&lt;div class="buttonrow_popup"&gt;&lt;input type="submit" value="Add" name="commit" class="submit small" id="room_submit"/&gt;&lt;a class="close" style="margin-top:6px;float: right;border:0"&gt;Cancel&lt;/a&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;');
        $(".pop").slideFadeToggle(function() { 
            $("#room").focus();
        });
        return false;
    });

    $(".close").live('click', function() {
        $(".pop").slideFadeToggle(function() { 
            $("#add_room").removeClass("selected");
        });
        return false;
    });

    $("#add_item").live('click', function(event) {          
        $(this).addClass("selected").parent().append('&lt;div class="messagepop pop1"&gt;&lt;form method="post" action="/room/add"&gt;&lt;label for="item"&gt;Item Name&lt;/label&gt;&lt;div class="field_span"&gt;&lt;input type="text" size="10" class="text" name="item_name" id="item" /&gt;&lt;/div&gt;&lt;div class="buttonrow_popup"&gt;&lt;input type="submit" value="Add" name="commit" class="submit small" id="room_submit"/&gt;&lt;a class="close1" style="margin-top:6px;float: right;border:0"&gt;Cancel&lt;/a&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;');
        $(".pop1").slideFadeToggle(function() { 
            $("#item").focus();
        });
        return false;
    });

    $(".close1").live('click', function() {
        $(".pop1").slideFadeToggle(function() { 
            $("#add_room").removeClass("selected");
        });
        return false;
    });

});

$.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
}; 
</code></pre>
