This post shows one way to position multiple jQuery UI dialogs on the same page. It positions the dialog over the calling button based on the button’s position in the viewport.

The dialog box contents can be placed anywhere in the body. For this example they look like this:

<div id="helpDialog1" title="Help >> Dialog 1">
        <p>In id imperdiet justo. Sed eu commodo erat. Nullam euismod dapibus magna a porttitor. Vestibulum odio turpis, ullamcorper eu ullamcorper sit amet, blandit id purus. Suspendisse commodo egestas augue, et fringilla lorem consequat et. Sed volutpat sapien at massa gravida sollicitudin. Nunc ut nibh orci.</p>
        <p>Nam quis odio vel arcu auctor tincidunt. Aenean vulputate, sapien id porttitor placerat, purus magna viverra ligula, eu tristique justo purus sit amet ligula. Etiam viverra, enim in luctus sollicitudin, arcu nulla accumsan quam, ut mattis orci eros at dui.</p>

    <p style="text-align:right;color: #cc0202;"><a id="closeHelp1" style="color:#cc0202;" href="#">Close</a> <strong>X</strong></p>
</div>

<div id="helpDialog2" title="Help >> Dialog 2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam orci eget enim vehicula volutpat. Cras eu tellus quis risus venenatis egestas vitae eget est. Donec nec lorem purus. Duis vitae tortor at lacus placerat rhoncus id sit amet lectus. Suspendisse potenti. Aliquam vitae tortor lorem.</p>
        <p>Proin ac sem magna. Donec interdum iaculis lacinia. Donec placerat malesuada mi, vitae malesuada sapien tincidunt ut. Mauris a nibh arcu. Etiam a magna a ipsum faucibus sollicitudin. Morbi nisl nunc, porttitor vitae suscipit in, rutrum at augue.</p>
        <p style="text-align:right;color:#cc0202;"><a id="closeHelp2" style="color:#cc0202;" href="#">Close</a> <strong>X</strong></p>
</div>

Not much. Just a little styling for sanity’s sake and lots of Latin. Take note of the id’s. They are helpDialog1 and helpDialog2. The number will be needed later.

Like, now…

$('[id^=helpDialog]').dialog({
                autoOpen: false,
                modal: false,
                width: 300,
                resizable: false,
                show: 'blind',
                hide: 'blind'
            });

The jQuery sets some options for the dialog boxes, and it does this by identifying the dialog boxes with the common part of the id. The ‘^’ means ‘starts with’ as in the id starts with helpDialog.

Just like that all the dialogs your heart desires are set and ready to go.

The click function on the help buttons does all the heavy lifting.

$('.help').click(function() {
              //strip off prefix of buttin id to get number for dialog
                var helpBtnIdPrefix = 'helpBtn';
                var helpBtnNum = $(this).attr('id').substring((helpBtnIdPrefix.length));

                //offset returns top and left of element
                var helpBtnOffset = $('#helpBtn' + helpBtnNum).offset();
                //width of element
                var helpBtnWidth = $('#helpBtn' + helpBtnNum).width();
                //width of dialog box
                var dialogWidth = $('#helpDialog' + helpBtnNum).dialog('option', 'width');

                //x and y positions of dialog box
                $('#helpDialog' + helpBtnNum).dialog('option','position',[helpBtnOffset.left+helpBtnWidth-dialogWidth,helpBtnOffset.top-$(window).scrollTop()]);
                $('#helpDialog' + helpBtnNum).dialog('open');
            });

The script starts by stripping off the prefix on the button id to get to the number of the button as it corresponds to the dialog box.

Then it gets the button offset or left and top position on the document. Next, it gets the button’s width. All this is used to properly place the dialog over the button.

The x position of the dialog are set using the button’s left position and width along with the dialog box width. The y position is set by using the button’s top position minus the window scroll position in case the user scrolled down.

After the math, the dialog is opened.

An extra close button was added at the bottom of the dialog box for user convenience.

//added close btn at bottom of dialog
            $('[id^=closeHelp]').click(function() {
                var closeHelpPrefix = 'closeHelp';
                var closeHelpNum = $(this).attr('id').substring((closeHelpPrefix.length));
                $('#helpDialog' + closeHelpNum).dialog('close');
            });

Usual recommended jQuery reading:

Demo

Download zip of all files

If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.

No related posts.