Modal popup on click of custom button

Sometimes u need to display some extra information on click of a custom button in a standard salesforce button but a simple javascript alert wouldnt serve the purpose.
In some scenarios you need to display some visualforce page and perform some operations .

In many scenarios this custom popup modal window will come to your rescue !

To create this pop first create a custom button.
For this example I am going to create a custom button opportunity

Go to "Opportunities"------>"Buttons, Links, and Actions".

• Click on "New Button or Link"
• Type in the label and description for the button
• For "Display Type" choose "Detail Page Button"
• For "Behavior" choose "Execute Javascript"
• For "Content Source" choose "OnClickJavascript"
• In the code section paste the following code.

{!REQUIRESCRIPT("https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")}   
function showSimpleDialog(){
   var sd = new SimpleDialog("Test"+Dialogs.getNextId(), true);

   sd.setTitle("Simple Dialog");

   sd.createDialog();

   window.parent.sd = sd;  sd.setWidth("50%");
  //Specify the iFrame and give URL of VF page or give the content
    sd.setContentInnerHTML("");


if ($(sd.dialog).find('#InlineEditDialogX').size() == 0) {
    var close = $("<a id='InlineEditDialogX' title='Close' tabindex='0' href='javascript:void(0)' class='dialogClose'>Close</a>");

    close.mouseover(function() {

    this.className = 'dialogCloseOn';
    }).mouseout(function() {
    this.className = 'dialogClose';
    }).click(function() {

    // finally our on click handler which closes the dialog
    sd.hide();
    //This is to refresh the page once the modal is closed.If you dont want to refresh comment the code
    window.location.reload(true);
    
    
    });
    // insert the new generated close button before the h2 tag so it'll show up on the top right corner
    close.insertBefore($(sd.dialog).find('.topLeft h2'));  
    } sd.show(); } showSimpleDialog();

Screen Shot:

Further add the button to the layout

once u click on the "custom Pop up" button a Cool looking light box modal will be opened up.

Output :

Further you can customize the height width and title of the lightbox to suit your requirements.

Happy Coding !!!!!