What does appendTags() do ? (i) Appends the Link Tag (Link to jQuery UI Stylesheet) to the Head tag of the Page. (ii) Appends a DIV Tag (that would form the jQuery Modal Dialog) to the Body tag of the Page. What does createPopupWindow() do ? Create a jQuery Modal Dialog with buttons 'Send Mail' and 'Cancel'. What does fetchEmailTemplates() do ? …

Send Mail.js

{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')}
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')}

function appendTags(){
    if(jQuery('[id=start-theme-css]').length==0){
        jQuery('head').append(
            '<link ' + 
                'id="start-theme-css"' + 
                'rel="stylesheet"' + 
                'href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.min.css"' + 
                'type="text/css" />'
        );

        jQuery('body').append(
            '<div id="dialog-confirm" title="Quick Mass Mailer">' + 
                '<p style="text-align:justify">' + 
                    '<img src="/s.gif" alt="Contact" class="pageTitleIcon" title="Contact" style="margin: 0 7px 30px 0"/>' + 
                    'Please select an email template to use. To create a new template, you must exit this mass email process and create the new template in your personal setup section.' + 
                    '<br/><br/>Email Template:<br/>' + 
                    '<select id="email-template" style="width:380px"></select>' +
                '</p>' + 
            '</div>'
        ); 
    }
}

function createPopupWindow(){
    jQuery(function() {
        jQuery( "#dialog-confirm" ).dialog({
            resizable: false,
            width: 400,
            modal: true,
            show: {
                effect: "bounce",
                duration: 500
            },
            hide: {
                effect: "bounce",
                duration: 500
            },                
            buttons: {
                "Send Mail": 
                    function() {
                        sendMail();
                    },
                
                Cancel: 
                    function() {
                        jQuery( this ).dialog( "close" );
                    }
            }
        });
    });
}

function fetchEmailTemplates(){
    var emailTemplates = 
        sforce.connection.query(
            'SELECT Id, Name FROM EmailTemplate',
            {
                onSuccess: 
                    function(result){
                        var records = result.getArray('records');
                        var innerHtml = '<option value="">--Select--</option>';
                        for(var i=0; i<records.length; i++)
                            innerHtml += 
                                '<option value="' + records[i].Id + '">' + 
                                    records[i].Name +
                                '</option>';

                        jQuery('[id=email-template]').html(innerHtml);
                    },
                onFailure:
                    function(error){
                        alert('An Error has Occurred. Error: ' + error);
                    }
            }
        );
}

function sendMail(){
    var contactIds = {!GETRECORDIDS( $ObjectType.Contact )};
    var templateId = jQuery('[id=email-template]').val();
    if(contactIds.length>0 && templateId!=''){
        var massMailRequest = new sforce.MassEmailMessage();
        massMailRequest.targetObjectIds = contactIds;
        massMailRequest.templateId = templateId;
        massMailRequest.replyTo = 'noreply@salesforce.com';

        sforce.connection.sendEmail([massMailRequest]);

        alert('Your emails have been submitted for processing.');
    }
}

appendTags();
fetchEmailTemplates();
createPopupWindow();