logo标签列表

允许弹出气泡窗口“跳出”jQuery UI对话框

jqueryhtmlcssjquery-uijquery-ui-dialog
3
在jQuery UI对话框中，我正在显示一系列选项（复选框）。列表中的每个节点都在末尾有一个帮助图标，在其上悬停时将显示带有信息的弹出气泡。
HTML代码：
<div id="dialog" class="hidden">
    <ul>
        <li><input type="checkbox" name="chk1"/> <label for="chk1">Node 1</label> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/24/Categories-system-help-icon.png" class="nodeTrigger" />
            <div class="popup hidden">
                <span class="bold">Node 1</span><br/>
                Some Long description of what Node 1 entails
            </div>
        </li>
        <li><input type="checkbox" name="chk2"/> <label for="chk2">Node 2</label> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/24/Categories-system-help-icon.png" class="nodeTrigger" />
            <div class="popup hidden">
                <span class="bold">Node 2</span><br/>
                Some Long description of what Node 2 entails
            </div>
            <ul>
                <li>
                    <input type="checkbox" name="chk3"/> <label for="chk3">Node 3</label> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/24/Categories-system-help-icon.png" class="nodeTrigger" />
            <div class="popup hidden">
                <span class="bold">Node 3</span><br/>
                Some Long description of what Node 3 entails
            </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS：

#dialog {
    position: relative;    
}

.hidden {
    display: none;
}

.bold {
    font-weight: bold;   
}

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

JavaScript（在jQuery的ready函数中）：

$('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'); }   
        }
    });
});

您可以在这里看到一个基本的示例：http://jsfiddle.net/YZpzN/6/。
我的问题是，我无法想出如何让弹出气泡突破对话框。当显示气泡时，它被包含在对话框内，导致滚动条出现。我需要它“突破”，必要时覆盖对话框。
更新：虽然@flec的答案解决了即时问题，但它并不完全符合我的需求。对话框中可能有很多选择，这意味着对话框本身可能需要垂直滚动条来保持其合理大小。如果可能的话，用右侧的div替换弹出式提示也是可以接受的（就像在div的右侧，覆盖在覆盖层上有一个信息框）。
1个回答
1
您只需要将您的CSS更改为以下内容：

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

更新的JSFiddle: http://jsfiddle.net/YZpzN/7/

太棒了！不过我有一个问题。对话框中可能会有很多选项，这意味着它可能需要垂直滚动条来保持对话框的合理大小。这个修复方案不会让这变得不可能吗？ - Morten Jacobsen
我想是这样的。CSS3中有一个overflow-x，但我没能让它起作用。也许你可以在对话框内使用另一个div。 - flec
我似乎也无法让它正常工作。我完全可以更改HTML，或者必要时，在div的右侧放置一个信息框（与div具有相同的z-index等），以便信息气泡始终在div之外...也许这更容易？ - Morten Jacobsen
@MortenJacobsen 我想你是对的。我认为你应该将info-div放在dialog-div之外。并使用position: absolute来在悬停时定位它。 - flec
我成功将信息气泡放在对话框外部，并与右侧对齐。不过，如果您不需要在 div 内部滚动，那么这个答案就可以使用，所以我接受了它。 - Morten Jacobsen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接