1

I have the following jQuery dialog exists on my page:

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    These items will be permanently deleted and cannot be recovered. Are you sure?
    </p>

</div>

In the jQuery UI demo page the text does not appear, yet on my site the text is shown.

I have changed nothing. Anyone else experience this?

jQuery Link

For example I see this text: These items will be permanently deleted and cannot be recovered. Are you sure?

2

2 Answers 2

1

The div is hidden when you call .dialog. Call it passing the autoOpen: false option inside the DOM ready event and call .dialog('open') when you want to display it.

$("#dialog-confirm").dialog({ 
    autoOpen: false,
    modal: true,
    //your buttons and other defined options
});

Fiddle

Of course, make sure you've included the jQuery lib, jQuery UI and CSS files correctly:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
Sign up to request clarification or add additional context in comments.

Comments

0

Working demo http://jsfiddle.net/Qd5Xe/3/

Pleas note you are missing the script source I reckon for Jq-UI and Css please see here

Hope it help the cause

script

<link rel="stylesheet" href="http://jqueryui.com/demos//css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>

Code

 $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });​

3 Comments

I have the css referenced but maybe i am missing something. http://mypage.com/manage/jquery/css/ui-lightness/jquery-ui-1.8.21.custom.css i will try the one's you listed as well
also, let me specify that this works properly. also, once the dialog is opened once, the text at the bottom disappears. so it appears as if it is not being initialized properly?
Is it possible that my issue comes from the fact that I want the dialog box to be initialized as hidden?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.