Allow the popup bubble to "burst" the jQuery UI dialog

The jQuery UI dialog box displays a list of options (checkboxes). Each node in the list has a help icon at the end of it, which will display a popup with information.

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 (in jQuery ready function):

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

      

You can see a basic example here:

http://jsfiddle.net/YZpzN/6/

My problem is that I cannot figure out how to allow the popup bubble to break out of the dialog. When the bubble is displayed, it is contained within the dialog box, resulting in scroll bars. I need it to "break through", overlaying dialogue if necessary.

UPDATE . While @ flec's answer solves the closest problem, it doesn't fully suit my needs. A dialog box can have many options, which means that the dialog itself may need a vertical scroll bar to maintain it intelligently. It is also acceptable for the popup to be replaced with a div on the right side of the dialog if possible (for example, with an info box to the right of the div above the caption).

+3


source to share


1 answer


You just need to change your CSS:

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

      



updated fiddle: http://jsfiddle.net/YZpzN/7/

+1


source







All Articles