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 に答える