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 就绪函数中）：

$('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 的右侧有一个信息框，覆盖在覆盖层上）。

4

1 回答 1

1

您只需要将您的 CSS 更改为：

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

更新的小提琴：http: //jsfiddle.net/YZpzN/7/

于 2013-01-26T11:25:15.847 回答