在打开新的弹出框之前关闭弹出框

Question

所以我偶然发现了这个线程，它工作得非常好-- How to generate a simple popup using jquery。但是，我有第二个链接，并且我已经更改了类名和所有内容。工作正常，但有两个问题。

1-如果我单击一个链接，然后决定单击另一个链接，它会在第一个链接的顶部显示第二个div。如果我单击"Cancel“，我将不得不连续关闭这两个div。没什么大不了的，但我在试着证明它是个笨蛋。

2-如果我点击"Add Room“，然后碰巧再次点击它，那么我不能点击"Cancel”按钮来隐藏div覆盖。我可以在链接上显示div，这样用户就不能再次点击它，但它看起来并不干净。

这是代码。

$(function() {
    $("#add_room").live('click', function(event) {                    
        $(this).addClass("selected").parent().append('<div class="messagepop pop"><form method="post" action="/room/add"><label for="room">Room Name</label><div class="field_span"><input type="text" size="10" class="text" name="location_name" id="room" /></div><div class="buttonrow_popup"><input type="submit" value="Add" name="commit" class="submit small" id="room_submit"/><a class="close" style="margin-top:6px;float: right;border:0">Cancel</a></div></form></div>');
        $(".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('<div class="messagepop pop1"><form method="post" action="/room/add"><label for="item">Item Name</label><div class="field_span"><input type="text" size="10" class="text" name="item_name" id="item" /></div><div class="buttonrow_popup"><input type="submit" value="Add" name="commit" class="submit small" id="room_submit"/><a class="close1" style="margin-top:6px;float: right;border:0">Cancel</a></div></form></div>');
        $(".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);
}; 

Answer 1

哦，这看起来像是很多代码。在您问题中发布的同一链接中有另一个答案，其中提到使用jQuery UI Dialog。我强烈推荐使用它，因为到目前为止它更容易使用。