Home/ Questions/Q 6190741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T02:38:33+00:00

I’ve been trying for a very long time to get this dialog box to

  • 0

I’ve been trying for a very long time to get this dialog box to work. I’ve crawled google and had a look at numerous question on here. I just can’t get it to work anyway shape or form. I’m trying to get a similar result to this one:
http://example.nemikor.com/basic-usage-of-the-jquery-ui-dialog/

I did try using the code in this source but I couldn’t get that to work either.

This is the jQuery:

<script type="text/javascript">
  $(document).ready(function(){

     // Initialize my dialog
     $("#dialog").dialog({
       autoOpen: false,
       modal: true,
       buttons: {
       "OK":function() { // do something },
       "Cancel": function() { $(this).dialog("close"); }
    }
});

 // Bind to the click event for my button and execute my function
       $("#x-button").click(function(){
       Foo.DoSomething();
       });
   });

       var Foo = {
       DoSomething: function(){
       $("#dialog").dialog("open");
     }
   }

And this is the HTML:

<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>

I’ve tried everything to get it to work but its not happening. The jQuery itself is from an answer posted to a similar question on here, I tried to use it after my own just gave up on life, if you could help me I would be greatly appreciative, and please note, I am new to Javascript/jQuery so please don’t rip on me too bad.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Closing brace is commented out here: 

    "OK":function() { // do something },

    You need to be careful with closing parentheses and curly braces. There were more problems with them, I fixed them, the following works:

    <html>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

     // Initialize my dialog
     $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "OK":function() {},
            "Cancel": function() { $(this).dialog("close"); }
        }
    }
    );

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });


    var Foo = {
        DoSomething: function(){
            $("#dialog").dialog("open");
        }
    }
});
</script>
</head>
<body>


<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>
</body>
</html>
    • 0