JavaScript and Web Development

jQuery Dynamic Modal Window

1 November 2010 - JavaScript, jQuery - James Brown - No Comments

Ever needed to display a jQueryUI modal window but you didn’t want to (or couldn’t) edit the HTML on the page? I was developing a “third-party” JavaScript file where I didn’t have control over the HTML page that my library was being included on. However, I wanted to popup a modal window when there was an error.

Well, using the below code, possibly coupled with code from loading jQuery dynamically, you can append code to the and pop-up your window:

$('<div id="error" title="No Address Matches Found">We could not match the address to any known addresses.  Please correct the address and try again.</div>')
  .appendTo('body')
 .dialog({
   modal: true,
    width: 425,
   height: 275,
    buttons: {
      OK: function(){
             $(this).dialog('close');
            }
     }
 });

Leave a Reply