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
                                                                });

Modal Dialog in SharePoint 2010

Modal dialog is new feature provided by SharePoint 2010. SharePoint 2010 uses modal dialog box for add and update items, perform administrator tasks without redirect current page.

To use modal dialog box you have to include client library SP.UI.ModalDialog. syntax for calling modal dialog box is shown below

SP.UI.ModalDialog.showModalDialog({
    url: "Url Of Page",
    title: "Title of Page",
    allowMaximize: true/false,
    showClose: true/false,
    width: in pixel e.g 800,
    height: in pixel e.g 600,
    dialogReturnValueCallback: callbackfunction
    });

Modal dialog box also takes SP.UI.DialogOptions as optional structure, syntax with structure is shown below

var Dialogoptions = SP.UI.$create_DialogOptions();

options.title = "PageTitle";
options.width = 600;
options.height = 800;
options.url = "PageUrl";
dialogReturnValueCallback: callbackfunction ;

SP.UI.ModalDialog.showModalDialog(options);

or you send options using simple generic object 

var genericoptions = {
    title: "PageTitle";,
    width: 800,
    height: 600,
   dialogReturnValueCallback: callbackfunction ,
    url: "PageUrl";};

SP.UI.ModalDialog.showModalDialog(options);


//Call back function syntax
function callbackfunction (dialogResult, returnValue) {

 }