I used jQuery-UI and jQuery to create a dialog popup for help snippets on search form inputs. (I am still a novice when it comes to JavaScript, but I am learning fast)

Here is the code for one of them

HTML (Calling Page)

<a id="Help" href="#">
    <img alt="help Symbol" src="Icons/helps.gif" style="border-style:none;"/>
    <span>Name Search</span>
</a>
<div id="dialog-confirm" title="Name Search Help" style="display: none;">

</div>

Script to call Dialog

   $("#Help").click(function () {
       $("#dialog-confirm").load("/help/nameSearch.htm").dialog({
           resizable: false,
           height: screen.height - 300,
           position: {
               my: "left top",
               at: "left top",
               of: "#Table1"
           },
           width: '790px',
           height: 'auto',
           modal: true,
           buttons: {
               "Okay": function () {
                   $(this).dialog("close");
               }
           },
           hide: { effect: "drop", direction: "up" },
           show: { effect: "drop", direction: "down" }
       });
   })

   $("#dialog-confirm").keypress(function (e) {
       if (e.keycode == $.ui.keyCode.ENTER) {
           $(this).dialog("close");
       }
   })

this works nicely to load the page from another folder in my site, but I get this weird glitchy feeling on the first time, which is going to probably be the most anyone will use these really awesome popup dialogs, so I want them even better.

Is there any way to make it load more smoothly?

I am not opposed to using AJAX.

I used jQuery-UI and jQuery to create a dialog popup for help snippets on search form inputs.

HTML (Calling Page)

<a id="Help" href="#">
    <img alt="help Symbol" src="Icons/helps.gif" style="border-style:none;"/>
    <span>Name Search</span>
</a>
<div id="dialog-confirm" title="Name Search Help" style="display: none;">

</div>

Script to call dialog

   $("#Help").click(function () {
       $("#dialog-confirm").load("/help/nameSearch.htm").dialog({
           resizable: false,
           height: screen.height - 300,
           position: {
               my: "left top",
               at: "left top",
               of: "#Table1"
           },
           width: '790px',
           height: 'auto',
           modal: true,
           buttons: {
               "Okay": function () {
                   $(this).dialog("close");
               }
           },
           hide: { effect: "drop", direction: "up" },
           show: { effect: "drop", direction: "down" }
       });
   })

   $("#dialog-confirm").keypress(function (e) {
       if (e.keycode == $.ui.keyCode.ENTER) {
           $(this).dialog("close");
       }
   })

This works nicely to load the page from another folder in my site, but I get this weird glitchy feeling on the first time, which is going to probably be the most anyone will use these really awesome popup dialogues. I want them even better.

Is there any way to make it load more smoothly?

I am not opposed to using AJAX.

I used jQuery-UI and jQuery to create a dialog popup for help snippets on search form inputs. (I am still a novice when it comes to JavaScript, but I am learning fast)

Here is the code for one of them

HTML (Calling Page)

<a id="Help" href="#">
    <img alt="help Symbol" src="Icons/helps.gif" style="border-style:none;"/>
    <span>Name Search</span>
</a>
<div id="dialog-confirm" title="Name Search Help" style="display: none;">

</div>

Script to call Dialog

   $("#Help").click(function () {
       $("#dialog-confirm").load("/help/nameSearch.htm").dialog({
           resizable: false,
           height: screen.height - 300,
           position: {
               my: "left top",
               at: "left top",
               of: "#Table1"
           },
           width: '790px',
           height: 'auto',
           modal: true,
           buttons: {
               "Okay": function () {
                   $(this).dialog("close");
               }
           },
           hide: { effect: "drop", direction: "up" },
           show: { effect: "drop", direction: "down" }
       });
   })

   $("#dialog-confirm").keypress(function (e) {
       if (e.keycode == $.ui.keyCode.ENTER) {
           $(this).dialog("close");
       }
   })

this works nicely to load the page from another folder in my site, but I get this weird glitchy feeling on the first time, which is going to probably be the most anyone will use these really awesome popup dialogs, so I want them even better.

I am not opposed to using AJAX.

I used jQuery-UI and jQuery to create a dialog popup for help snippets on search form inputs. (I am still a novice when it comes to JavaScript, but I am learning fast)

Here is the code for one of them

HTML (Calling Page)

<a id="Help" href="#">
    <img alt="help Symbol" src="Icons/helps.gif" style="border-style:none;"/>
    <span>Name Search</span>
</a>
<div id="dialog-confirm" title="Name Search Help" style="display: none;">

</div>

Script to call Dialog

   $("#Help").click(function () {
       $("#dialog-confirm").load("/help/nameSearch.htm").dialog({
           resizable: false,
           height: screen.height - 300,
           position: {
               my: "left top",
               at: "left top",
               of: "#Table1"
           },
           width: '790px',
           height: 'auto',
           modal: true,
           buttons: {
               "Okay": function () {
                   $(this).dialog("close");
               }
           },
           hide: { effect: "drop", direction: "up" },
           show: { effect: "drop", direction: "down" }
       });
   })

   $("#dialog-confirm").keypress(function (e) {
       if (e.keycode == $.ui.keyCode.ENTER) {
           $(this).dialog("close");
       }
   })

this works nicely to load the page from another folder in my site, but I get this weird glitchy feeling on the first time, which is going to probably be the most anyone will use these really awesome popup dialogs, so I want them even better.

Is there any way to make it load more smoothly?

I am not opposed to using AJAX.