Initializing and opening Jquery-ui dialog

Question

i'm trying to load a jquery-ui dialog when the page loaded .the page content is loading but the dialog doesn't show.

<script>
    $(document).ready(function() {

        $("#loginfailed").dialog({
            width: 500, autoOpen: false, resizable: false, draggable: false,
            modal: false        
        });
        $("#loginfailed").dialog("open");
    });

</script>

am i missing something ? i almost read the doc but it doesn't help me much .

Answer 1

Your code work fine! Have you add jquery-ui.js in your head tag. Please see below with div id loginfailed

$(document).ready(function() {
        $("#loginfailed").dialog({
            width: 500, autoOpen: false, resizable: false, draggable: false,
            modal: false        
        });
        $("#loginfailed").dialog("open");   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div id="loginfailed">this is loading</div>