Saturday, July 3, 2010

Creating pop ups with JQuery

Background:
I like Jquery as well as YUI .I have used some components of Jquery in few cases. But there are specific things which you should be careful while you are using this nice frameworks .

Sample
:
Jquery dialogs are used for pop ups .Have a look at the code below :
// Dialog
$('#dialog').dialog({
autoOpen: false,
modal:true,
width: 600
});
As you can see "dialog" is the document id where a div based dialog will be created .It will look like







Up to this it is fine .Now if I have multiple pop ups in my page should I be creating multiple different div ids to create them ? Answer is no .
1. Create a Java script global variable , var popupDivId = "#panelDivId" and replace the line $('#dialog').dialog with $(popupDivId).dialog.
2.Similarly assign a closing function to the dialog ,like
$(popupDivId).dialog({
autoOpen: false,
modal:true,
width: 600,
beforeclose: function(event, ui) { performClosingTask(); }
});
This performClosingTask method will remove the div id ,when the dialog is closed .
var containerDiv = doc.getElementById(popupDivId );
containerDiv.parentNode.removeChild(containerDiv);

Note:
With this strategy, you should also have a check before you create open any pop up, whether already another popup is already opened or not .that is
if(docObj.getElementById(panelDivId))
{
window.status = 'Div with id ' + panelDivId + 'is already found ' ;
return;
}
If already one pop up is opened new pop up should not be opened , the already opened pop up should be closed ,then only new pop up should be opened .

No comments:

Post a Comment