+ Start a Discussion

strucked in javascript popup window with fade effect

I want to create a javascript button. Like  setup-->contact-->Buttons and links --->Execute javascript   ----- Right...

Next when we click on a  button in contact record one popup window should be came.


But the popup outside window should be Fade Effect (Dark color)..


Please help me guys 


How are you doing the popup, like an actual window ? You would want to work with the lighbox technique, and make your pop up with a div's and css I believe. (I don't have an example, but there should be plenty if you use a search engine)




Thanks for reply...


the popup comes like window.open(-------) 

I have searched lot of ways but i didn't find that. i can find in html formate. but i don't know how to convert it to javascript.

I don't know how to work with Div's and css in javascript page...


please help me guys


Thank you





I guess you want to create a model popup window. on custom button click.

If yes then there is not any predefine function by SF to create model popup.


To create a model popup you need to use jquery.

Please follow below steps to create model popup.


  1. Create static resource of jquery files (jquery, jqueryCSS, jqueryUI) and upload these resources on your org. ( Adding jQuery To your salesforce application )
  2. Now include those static resources into your button script.


  3. Now create new div which will represent your popup window.
  4. As we know that we don't have any controller on SF page layout and there CSS. But still I want to open the popup on same page layout. For that I open the pagelayout's source code where I am looking for some common element. I do the same for all different objects page layout then come to know that there is one "div" which is common in most of the page layout. I copy that div id (contentWrapper) and open my popup div into this "contentWrapper" div.

Here I am sharing the sample code which will open your popup window into the objects page layout n show the records name.



var elementId = 'contentWrapper';
var recordName = '{!Lead.Name}';
var recordMobilePhone = '{!Lead.MobilePhone}';

document.getElementById(elementId).innerHTML += "<div id='InlineEditDialog' role='dialog' aria-live='assetive' aria-describedby='InlineEditDialogTitle' class='overlayDialog inlineEditDialog' style=' width: 450px; height: 450px; max-height: 1366px; max-width: 550px; display: block; left: 506.5px; top: 38.5px; visibility: visible;'><div class='topRight'><a title='Start of Dialog' style='width: 2px; height: 2px; position: absolute; border: 0pt none; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; outline: medium none; z-index: -1; cursor: none;' onclick='return false;' href='javascript&colon;void(0)' id='InlineEditDialogFocusPoint'>Start of Dialog</a><div class='topLeft'><a class='dialogClose' href='javascript&colon;void(0)' tabindex='0' title='Close' id='InlineEditDialogX' onclick='location.reload();'>Close</a><h2 id='InlineEditDialogTitle'>POPUP Dialog</h2></div></div><div class='middle'><div id='InlineEditDialogContent' class='innerContent'><div class='activeField'><div class='inlineEditCompoundDiv' id='lea16_ileinneredit'><table border='0'><tbody><tr><td class='labelCol'><label for='recordName' style='float:left;'>Name</label></td><td id='recordName'>"+recordName+"</td></tr><tr><td class='labelCol'><label for='recordMobilePhone' style='float:left;'>Mobile Number</label></td><td id='recordMobilePhone'>"+recordMobilePhone+"</td></tr></tbody></table></div></div><div></div><div style='display: none;'></div><div class='buttons' id='InlineEditDialog_buttons'><input type='submit' id='close' onclick='' value='Cancel' class='btn' id='close'></div></div></div><div class='bottomRight'><input type='text' style='width: 2px; height: 2px; position: absolute; border: 0pt none; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; outline: medium none; z-index: -1; cursor: none;' id='InlineEditDialogBlurCatch'><div class='bottomLeft'></div></div></div><div class='overlayBackground' id='backgroundOfDiag' style='width: 1366px; height: 1505px; display: block;' ></div>";



 I know this is not a standred way to do it. But I found only this workaround. This code may fail if SF made changes into there CSS. I am hopping SF may open some API to create a popup on any layout. But till that we can use this workaround.


I hope you are satisfy with this reply.





Hi Puru,


Thanks for your work...


Actually this requirement is very complex so we are going in some another way to do it...


Thanks a lot