Home/ Questions/Q 9198307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:15:20+00:00

I am using Jquery Modal Popup , see the live code which I am

  • 0

I am using Jquery Modal Popup, see the live code which I am using here

Press Ctrl + F5 a couple of times and you will see the content of the div “Hello World”.

Why does it shows that in the first place and how to get rid of it ?

Below is the full code I am using, you can edit the code here using this link.

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />  
    </head>
    <body>
        <input type="button" id="btn1" value="Open Jquery Modal Popup" />
        <div id="dialog">
            <h2>Hello World</h2>
        </div>
    </body>
</html>

JS

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        width: 350,
        modal: true,
        resizable: false
    });

    $("#btn1").click(function(){
        console.log("aa");
        $( "#dialog" ).dialog("open");
    })
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you mean that you can see the #dialog div for a split second on page load before it disappears, it’s because it’s visible before the DOM loads, and it’s then hidden.

    You can hide it manually using CSS like this:

    #dialog {
    display: none;
}

    The dialog plugin will then take care of showing/hiding it for you.

    • 0