允许弹出泡泡“打开”；“爆发”；jqueryui对话框的创建

在jQueryUI对话框中，我显示了一个选项列表（复选框）。列表中的每个节点的末尾都有一个“帮助”图标，在该图标上，鼠标悬停时将显示一个带有信息的弹出气泡

HTML:

JavaScript（在jQuery就绪函数中）：

您可以在此处看到一个基本示例：

我的问题是，我不知道如何让弹出的气泡打破对话框。显示气泡时，气泡包含在对话框中，从而生成滚动条。我需要将其“中断”，必要时覆盖对话框

---

更新：尽管@flec的答案解决了眼前的问题，但它并不完全符合我的需要。对话框中可能有许多选项，这意味着对话框本身可能需要一个垂直滚动条来保持其合理大小。如果可能的话，也可以将弹出窗口替换为对话框右侧的div（比如在div右侧的覆盖层上有一个信息框）。

您只需将CSS更改为：

#dialog {
    position: relative;   
    overflow: visible;
}

---

更新的小提琴：

棒极了。。但有一个问题。。对话框中可能有很多选择，这意味着可能需要一个垂直滚动条来保持对话框的合理大小。。这不就不可能了吗？我想是的。CSS3中有一个

overflow-x

，但我没有设法去上班。也许你可以在你的dialog-div中使用另一个div。我似乎也不能让它工作。我完全愿意更改HTML，或者在必要时，将信息框放在div的右侧（与div相同的z索引等），因此信息气泡总是在div之外。。“也许这更容易些？”莫滕·雅各布森我想你是对的。我想你应该把info div放在dialog-div的外面，然后用

position:absolute

把它放在hover上。我设法把info bubble放在对话框外面，在右边对齐。不过，如果你不需要在div中滚动，这个答案是有效的，所以我接受它。

#dialog {
    position: relative;    
}

.hidden {
    display: none;
}

.bold {
    font-weight: bold;   
}

.popup {
    background-color: #dddddd;
    border: 1px solid #000000;
    width: 400px;
}

$('img.nodeTrigger').hover(
    function(e){
        var that = $(this);
        var position = that.position();

        var popup = $(that.parent().find('div.popup').get(0));
        var top = position.top - (popup.outerHeight() / 2.0) + (that.outerHeight() / 2.0);
        var left = position.left + that.outerWidth() + 5;
        popup.stop(true, true)
        .css({ 'position': 'absolute', 'top': top, 'left': left, 'z-index': 99999 })
        .fadeIn('slow');
    },
    function(){
        var popup = $(this).parent().find('div.popup');
        popup.stop(true, true).fadeOut('slow');   
    }
);

$('#dialog-trigger').click(function(e){
    e.preventDefault();
    $('#dialog').dialog({
        width: 400,
        height: 300,
        modal: true,
        resizable: false,
        title: 'Choose some items',
        buttons: {
            'Ok': function() { $(this).dialog('close'); }   
        }
    });
});

#dialog {
    position: relative;   
    overflow: visible;
}