How to properly show a pop up dialog using html/jQuery UI

Question

With this code I want to show a jQuery UI dialog when I click on a button. However, the text of the dialog is shown for a brief time when the page loads. What is the right way to implement this? My html:

<!DOCTYPE html>
  <html>
    <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
    </head>
    <body>
      .. html code ..
      <button id="helpbutton" title="">Help</button>

      <div id="helpdialog" title="Help dialog">
        <p>Text in the dialog will be visible for a short time when the page loads</p>
      </div>

      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
      <script type="text/javascript" src="myJsFile.js"></script>
    </body>
  </html>

as you can see, I call my external scripts just before the end of the for performance reasons.

myJsFile.js:

    //Fire up the help dialog when the help button is pressed
    jQuery(function() {
      jQuery( "#helpdialog" ).dialog({
        autoOpen: false
      }); 
      jQuery( "#helpbutton" ).click(function() {
        jQuery( "#helpdialog" ).dialog( "open" );
      });
    });

Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section

  #helpdialog {
    display: none;
  }

Any errors in console ?

Suresh Atta
– Suresh Atta

2015-09-13 13:00:43 +00:00
Commented Sep 13, 2015 at 13:00 — Suresh Atta
– Suresh Atta, Commented Sep 13, 2015 at 13:00
There is nothing wrong with your code, see fiddle

Max Brodin
– Max Brodin

2015-09-13 13:07:32 +00:00
Commented Sep 13, 2015 at 13:07 — Max Brodin
– Max Brodin, Commented Sep 13, 2015 at 13:07

krzmig · Accepted Answer · 2015-09-13 13:54:57Z

2

Did you load UI jQuery JS and CSS? Like in this example:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
        $(function() {
            $( "#dialog" ).dialog();
        });
        </script>
    </head>
    <body>
    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    </body>
    </html>

source: https://jqueryui.com/dialog/

edit:

For not showing dialog box when site is loading put to your CSS file code:

#helpdialog {
  display: none;
}

or add to <head> section if you don't have external CSS.

<style>
#helpdialog {
  display: none;
}
</style>

edited Sep 13, 2015 at 13:54

answered Sep 13, 2015 at 13:13

krzmig

611 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aless80 Over a year ago

yes, I load the CSS in the head and jQuery Ui (and other stuff) before the end of the body (so my structure is different than the example in jQuery UI). I edit my problem description.

Ehsan88 · Accepted Answer · 2015-09-13 13:33:59Z

0

First include jquery as well. Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. Here's the code (keep your myJsFile.js intact):

<!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <button id="helpbutton" title="">Help</button>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

      <script type="text/javascript" src="myJsFile.js"></script>


      <div id="helpdialog" title="Help dialog">
        <p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
      </div>

    </body>
  </html>

answered Sep 13, 2015 at 13:33

Ehsan88

3,8415 gold badges33 silver badges55 bronze badges

1 Comment

aless80 Over a year ago

Thank you for your answer, but putting the <div> after my scripts does not help. I already had jQuery included (and I edited my problem description)

Md. Salahuddin · Accepted Answer · 2015-09-13 13:34:21Z

0

You also need to include jquery main library. The required includes are jquery library, jquery ui js, and jquery ui css.

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <script type="text/javascript" src="myJsFile.js"></script

answered Sep 13, 2015 at 13:34

Md. Salahuddin

1,07215 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to properly show a pop up dialog using html/jQuery UI

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related