How to open hyperlinks into modal dialog box in SharePoint 2010

SharePoint 2010 provides new feature "Modal dialog box". In this blog we shows how to open hyperlinks in modal dialog box using simple jquery selector.

Declaration syntax for modal dialog box is as follows

//Using the DialogOptions class.
var options = SP.UI.$create_DialogOptions();

options.title = "Dialog box title";
options.width = 300;
options.height = 500;
options.url = "PageUrl";

SP.UI.ModalDialog.showModalDialog(options);


//Using a generic object.
var options = {
    title: "Dialog box title",
    width: 300,
    height: 500,
    url: "PageUrl" };
SP.UI.ModalDialog.showModalDialog(options);


Now we put above modal dialog syntax in jquery selector

$("[href(selection attributes)'Condition']").click ( function () {
                                                                   var options = {
                                                                   title: "Dialog box title",
                                                                   width: 300,
                                                                   height: 500,
                                                                   url: $(this).attr('href')
                                                                 };
                                                                   return false;// required to override default behavior of hyperlink tag
                                                                });

We have to open link which contains the query string parameters "ShowInDialog=1", then selection condition for it
$("[href*='ShowInDialog=1']")

Attribute for selection 
!= is not equal
^= is starts with
$= is ends with
*= is contains



Example for selecting hyper links which contains query string parameter "ShowInDialog=1" 
$("[href*='ShowInDialog=1']").click ( function () {

                                                                   var options = {
                                                                   title: "Dialog box title",
                                                                   width: 300,
                                                                   height: 500,
                                                                   url: $(this).attr('href')
                                                                 };
                                                                   return false;// required to override default behavior of hyperlink tag
                                                                });