Question

所以我遇到了这个帖子并且效果很好 - How to generate a simple popup using jquery。但是，我有第二个链接，我已经更改了类名和所有内容。工作正常，但有两个问题。

1 - 如果我点击一个链接，然后决定点击另一个链接，它会在第一个链接上显示第二个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提及的另一个答案。我强烈建议使用它，因为它更容易使用。

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

1 个答案: