单击按钮时显示对话框

Question

i ty to display a dialog when i click on a button

in my js part i have

   $('#dialog').dialog({
        autoOpen: false
    });

    $('#create-report').click(function() {
        $('#dialog').dialog('open');
    });

in my html part i have

<div id="dialog" title="Basic dialog" style="visibility:hidden;">
    <p>hi how are you</p>
</div>

<button id="create-report" >Create new report</button>

nothing is displayed and i don't have any error

why?

Answer 1

Try using display:none instead of visibility:hidden to initially hide the dialog.

<div id="dialog" title="Basic dialog" style="display:none;">
    <p>hi how are you</p>
</div>

Also make sure that jQuery and jQuery UI are being loaded properly. This fiddle works: http://jsfiddle.net/E3Pek/

Answer 2

It's not necessary that you put the style on your div.

Should be like this:

<div id="dialog" title="Basic dialog">
    <p>hi how are you</p>
</div>

Remember the order that you have to load the jquery scripts. First load jquery library and then jquery-ui.