Adding a jQuery UI Dialog to your blogger.com

One item I find very useful from the jQuery UI range is the .dialog(), its a much nicer sight than the typical browser alert() box!

In this little tutorial I will show you how to add a jQuery wrapper function which will allow you to show a dialog with a custom title and contents from anywhere in your blog. I have opted for a wrapper function as I generally don't change my dialog's, you could, if you wanted change things to allow you to customize the dialog a little more. But for now, I'll stick with the simple stuff!

If you have looked at my post on "Adding jQuery to your blogger.com"  and you were keen, you may have noticed, in the demo towards the bottom of the page, where I used the jQuery UI .button() effect to change a boring button for a nice pretty one, I also changed what happens when you click the button (just in case you wanted to see it really does work) yep, its a dialog.

Just in case you want to see it again:


Lets see some code:


Firstly lets add the HTML needed for the dialog:

1. Login to your blog. At the top right of the page (for me anyway) click Design 
2. Click on the Edit HTML tab.
3. Now search for the line </body>
4. Just before the line, add the following code, this will be the holder for the dialog:

<div id='dialogMsg' style='display:none;'/>

Now its time for the jQuery wrapper function which will do the work of displaying the default dialog:

1. Whilst still in the Edit HTML section, we are going to add some code to our jQuery block we setup if you followed "Adding jQuery to your blogger.com".
2. Find the line $(document).ready(function(){ 
3. Just after the line, add the following code:

$.fn.dialogPopup=function(title, content) {
  $(this).html('');
  $(this).dialog('destroy');
  $(this).html(content);
  $(this).dialog({
   title:title, 
   modal:true,
   autoOpen:true,
   buttons: {
    "Close": function() {
     $(this).dialog("close");
    }
   },
   destroyOnEscape:true
  });
 };

OK so now all the codes in place lets see how we could use our new wrapper function.

A basic button example:

1. Start by creating a New Post, or Editing an existing one.
2. Complete your page first using the Compose tab (if thats how you normally do things).
3. Click on the Edit HTML tab. Now we'll add the HTML and jQuery code which does the niceties.
4. Find the part of the code where you want to add the, in this case button and add the following HTML:

<input id="myNewButton" type="button" value="Nice jQuery UI Button" />

5. Finally add a little script block which will allow us to setup the jQuery code just for this post:

<script type="text/javascript">
 $(function(){
  $("#myNewButton").click(function(){
   $("#dialogMsg").dialogPopup("This is the title...", "And this is the contents of the dialog!"); 
  }).button();
 });
</script>

The results from above:

What else could we use this for? What every you can think of!!! How about stopping someone right licking on the page (go on, you should know by now that you can try it out).
Wanna see how I did it:

$(this).mousedown(function(event) {
   switch (event.which) {
    case 3:
     $(document).bind("contextmenu",function(){return false;});
     $("#dialogMsg").dialogPopup("No right clicking....", "I do hope that was a test and ya ain't trying to pinch my code ya cheeky bugger :p ");
     break;
    }
  });

Scoobler.

Some jQuery books on Amazon.com: