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

Question

所以我遇到了这个线程，它运行良好 - How to generate a simple popup using jquery。但是，我有第二个链接，我已经更改了类名和所有内容。工作正常，但有两个问题。

1 - 如果我单击一个链接然后决定单击另一个链接，它会在第一个 div 的顶部显示第二个 div。如果我单击“取消”，我最终不得不连续关闭两个 div。没什么大不了的，但我正在努力证明它是白痴。

2 - 如果我点击“添加房间”然后碰巧再次点击它，那么我无法点击“取消”按钮来隐藏 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 代替。我强烈建议使用它，因为它更容易使用。