show popup when custom button clicked on salesforce standard page

Javascript code :

{!REQUIRESCRIPT("https://code.jquery.com/jquery-1.10.2.js")} 
{!REQUIRESCRIPT("https://code.jquery.com/ui/1.10.4/jquery-ui.js")} 
{!REQUIRESCRIPT("/resource/mainjs")} 

j$("#modalDiv").dialog('option','title','{!Lead.Name}').dialog('open');
\

/*@description: This script will insert a modal div in the standard page.
                the modal will contain a VF page. This file should be located in static resource.*/
var j$ = jQuery.noConflict();
var currentUrl = window.location.href;
var hostIndex = currentUrl.indexOf(window.location.host+'/')+(window.location.host+'/').length;
var accountId = currentUrl.substring(hostIndex,hostIndex+15); 
j$(function(){
    /*Insert the jQuery style sheets in the Head.*/
    /*Insert the Modal dialog along with the VF as an iframe inside the div.*/
    j$("head").after(
        j$("<link>",{rel:"stylesheet",
                    href:"https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"}));
    j$("body").after(
        j$("<div>",{id:"modalDiv",
                    style:"display:none;"
           }).append(
            j$("<iframe>",{id:"vfFrame",
                         src:"/apex/popup4page?id="+accountId,
                         height:200,
                         width:550,
                         frameBorder:0})
           ));
    /*Initialize the Dialog window.*/
    j$("#modalDiv").dialog({
        autoOpen: false,
        height: 210,
        width: 605,
        modal:true
    });
});

visualforce email template with attachment

Create the Email template

<messaging:emailTemplate subject="offer Process" recipientType="Offer_Process__c"
 relatedToType="Offer_Process__c" replyTo="noreply@difc.com">
    <messaging:attachment renderAs="PDF" filename="LeadOfferUnitPDFTemplate.pdf">
        <c:offerProcessAttachment offerId="{!relatedTo.Id}"/>
    </messaging:attachment>
    <messaging:htmlEmailBody >
    <html>
        Please find your invoice attached.
    </html>
    </messaging:plainTextEmailBody>
</messaging:emailTemplate>

Create the component

<apex:component controller="offerUnitAttachmentController" access="global">
    <apex:attribute name="offerId" description="Contact Id" assignTo="{!leadObjectId}" type="Id" />
    <apex:outputText value="{!PageContents}" escape="false" />
</apex:component>

Controller

global class offerUnitAttachmentController {

  global String PageContents{ get; set; }
  global String leadObjectId{
    get;
    set {
        UpdateContents(value);
    }
  }

  public void UpdateContents(String contactObjectID) {
    try {
        PageReference pageRef = Page.LeadOfferUnitPDFTemplate;
        pageRef.getParameters().put('id',leadObjectId);
        PageContents = pageRef.getContent().toString().replace('<html style="display:none !important;">', '<html>');
    } catch(exception ex) {
        PageContents = 'An error has occurred while trying to generate this invoice.  Please contact customer service.' +
                       '\n\nError Message:' + ex.getMessage();
    }
  }
}

PDF page Template  LeadOfferUnitPDFTemplate

<apex:page controller="ReceiptController" applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false">
<html>
<span>Dynamic PDF data:  <apex:outputText value="{!ContactName}" escape="false"/></span>
</html>

</apex:page>