Change Jquery UI Dialog Title

Since I don't like outside pop up windows, I always loved the way Jquery UI gave me the ability to display a nicely styled dialog box; I especially love the modal function, it's great so users don't click anywhere else.

Since developers are all about reusing code, it seemed to make sense to create a div to call my dialog box and pass the url to load into this div...but what if the data I want has a different purpose/title? Jquery made this very easy to do (but a pain to find and implement).

First include your Jquery and Jquery UI script.

Second, create your div anywhere on your page, give it an ID and give it any Title:

<div id="popUpBox" title="Details"></div>

Then set the code needed to turn this into a modal dialog:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
//set dialog params        
    var dialogOpts = {
      modal: true,
      autoOpen: false,
      height: 320,
      width: 480,
      draggable: true,
      resizeable: true
   };
    $("#popUpBox").dialog(dialogOpts);   
//end dialog
});
</script>

I then create a function for each of my needed 'pop up boxes' and feed in the url to load on the div and change the title by altering the dialog 'Option' on each call (this is where the magic happens):


function fnViewHistory()
    {
        $('#popUpBox').dialog( "option", "title", "History");
            $("#popUpBox").load("viewHistory.cfm?id="+$("#USERID").val(), [], function(){
               $("#popUpBox").dialog("open");
            }
         );
         return false;
    }

function fnViewProfile()
    {
        $('#popUpBox').dialog( "option", "title", "User Profile");
            $("#popUpBox").load("viewProfile.cfm?id="+$("#USERID").val(), [], function(){
               $("#popUpBox").dialog("open");
            }
         );
         return false;
    }

And that's it!

Change Jquery UI Dialog Title

Categories