Question

I am trying to get my first jQuery UI dialog to pop up in the center of the user’s screen when they click a button. I would like it to look like the one in the example on that link above (in terms of style, not content).

At the top of my page, I have an internal CSS <style> tag defined, which defines the following rule:

#add-btn-dlg-panel {
    display: none;
}

This rule makes sure the dialog is not visible at page load.

Next, I have the <div> tag that defines the UI of the dialog:

<div id="add-btn-dlg-panel" title="Add new attribute value">
    <div id="attrib-type-input">
        <select id="attrib-type-sel"></select>
    </div>

    <div id="attrib-value-input"></div>

    <div id="add-config-dlg-btn-panel">
        <input id="add-config-dlg-ok-btn" type="button" value="OK"/>
        <input id="add-config-dlg-cancel-btn" type="button" value="Cancel"/>
    </div>
</div>

It consists of a <select>, another div that will be populated based on other events (outside the context of this question), and then two buttons, OK and Cancel.

Finally, I have the jQuery that attempts to draw the UI dialog when the user clicks an “Add” button:

$("#add-config-btn").click(function() {
    $("#add-btn-dlg-panel").show();
    $("#add-btn-dlg-panel").dialog('open');
});

As far as I can tell, everything looks good. But when I fire up a browser (FF) and run this, when I click the “Add” button, the UI dialog draws half-way off my screen (not CENTERED), doesn’t have a border, or resemble the UI dialog in the above link in any way, shape or form.

So I ask:

• How do I center the UI dialog?
• How do I style UI dialog so that it resembles the one in the link?

Thanks in advance!

Answer 1

Working demo http://jsfiddle.net/rES7j/show/# or http://jsfiddle.net/rES7j

scripts

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css">

code

$(document).ready(function() {
    $('#theLink').click(function(){
                $( "#add-btn-dlg-panel" ).dialog( "open" );    
    });

    $( "#add-btn-dlg-panel" ).dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
    });


});

Working image in chrome

​