Question

I am using a jQuery modal dialog in my ruby on rails application. Here’s my code:

        var html = '';
        html += '<div id="dialog-form">';
        html += 'This is a test.';
        html += '<button id="form-close" class="close-button" type="button" onclick="$(\'#dialog-form\').dialog(\'close\');">Close</button>';
        html += '</div>';

        var dialog_form = $(html).dialog({
            autoOpen: false,
            width: 600,
            height: 640,
            modal: true,
            open: function() {
                $(".ui-dialog-titlebar").hide();
            },
            close: function(event, ui) {
                $('#dialog-form').remove();
            }
        });
        dialog_form.dialog('open');

I used the same code in another application, and it works perfectly.

In my current application, instead of rendering a modal dialog, this script renders a transparent dialog window. The text and button are rendered properly. But, the dialog is transparent, and not modal.

I have made sure that I have included jquery.js and jquery-ui.js.

I can’t figure out what’s wrong with what I am doing. Please help.

Thanks.

Answer 1

add reference of jquery css, js files. also check that the class name of the dialog is correct. you will need to add more divs in your main div (the exact code is in the index page of jquery code from jqueryui.com)