by

Custom Button/Link add Dialog Window

{!REQUIRESCRIPT("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")}
function autoLoader_js() {
if(jQuery) {
var d = sfdcPage.dialogs['MyCoolDialog'], close;
 if (!d) {
 // if the dialog doesn't exist create one
 d = sfdcPage.dialogs['MyCoolDialog'] = new SimpleDialog('MyCoolDialog', false);
 // set general information on your dialog and finally run the create function
 d.setTitle('請求書');
 d.setWidth(600);
 d.createDialog();
 }
// give your dialog some content (I usually use an iframe linking to another visualforce page
 // change the url, height, width to your needs
 $(d.dialog).find('#MyCoolDialogInner').html('<div class="pbBody"><div><div class="pbSubsection"><table class="detailList" border="0" cellpadding="0" cellspacing="0"><tr><td class="labelCol first "><label>会計宛名</label></td><td class="data2Col first "><input id="dialog_accName" type="text" size="90" value="{!JSINHTMLENCODE(AccountAcount__c.ContactName__c)}"/></td></tr><tr><td class="labelCol "><label>コメント</label></td><td class="data2Col "><input id="dialog_comment" type="text" size="90" /></td></tr><tr><td class="labelCol "><label>振込先１</label></td><td class="data2Col "><input id="dialog_payee1" type="text" size="90" value="{!JSINHTMLENCODE($Setup.CommDefine__c.FacilityPayee1__c)}"/></td></tr><tr><td class="labelCol "><label>振込先２</label></td><td class="data2Col "><input id="dialog_payee2" type="text" size="90" value="{!JSINHTMLENCODE($Setup.CommDefine__c.FacilityPayee2__c)}"/></td></tr><tr><td class="labelCol "><label>振込先３</label></td><td class="data2Col "><input id="dialog_payee3" type="text" size="90" value="{!JSINHTMLENCODE($Setup.CommDefine__c.FacilityPayee3__c)}"/></td></tr><tr><td colspan="2" style="text-align: right;"><input class="btn" id="dialog_cancelBtn" style="width: 100px" type="button" value="キャンセル" /> <input class="btn" id="dialog_printoutBtn" style="width: 100px" type="button" value="請求書作成" /></td></tr></table></div></div></div>');
$(d.dialog).find('input[type="button"]').on('click', function() {
 var btnId = $(this).attr("id");
 if (btnId == "dialog_cancelBtn") {
 d.hide();
 } else if (btnId == "dialog_printoutBtn") {
 // 請求書画面を起動する
 var custName = $("#dialog_accName").val();
 var comment = $("#dialog_comment").val();
 var payee1 = $("#dialog_payee1").val();
 var payee2 = $("#dialog_payee2").val();
 var payee3 = $("#dialog_payee3").val();
 var url = "{!URLFOR('/apex/' & $Setup.CommDefine__c.AppNS__c & 'BillPDF')}";
 var custNameUrl = "?id={!AccountAcount__c.Id}&cuName=" + encodeURIComponent(custName) + "&comment="+encodeURIComponent(comment);
 custNameUrl += "&py1="+encodeURIComponent(payee1) + "&py2="+encodeURIComponent(payee2) + "&py3="+encodeURIComponent(payee3);
 window.open(url + custNameUrl);
 d.hide();
 }
 });
 // we also need to make sure we have a close button on the dialog
 if ($(d.dialog).find('#InlineEditDialogX').size() == 0) {
 // if there is none we create it
 close = $('<a id="InlineEditDialogX" title="Close" tabindex="0" href="javascript:void(0)" class="dialogClose">Close</a>');
 // add some functionality to the close button (for the default ui we change the classname on mouseover/out
 close.mouseover(function() {
 this.className = 'dialogCloseOn';
 }).mouseout(function() {
 this.className = 'dialogClose';
 }).click(function() {
 // finally our on click handler which closes the dialog
 d.hide();
 });
 // insert the new generated close button before the h2 tag so it'll show up on the top right corner
 close.insertBefore($(d.dialog).find('.topLeft h2'));
 }
 // now it's time to show the new dialog
 d.show();
}
}
autoLoader_js();
// if you want to use it inside a visualforce page create a function around it
function showFollowUp() {
  // if you want to use it in a button make sure you require jQuery
  // {!REQUIRESCRIPT("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")} // UNCOMMENT IF IN A BUTTON
  // get the dialog with your dialog name
  var d = sfdcPage.dialogs['MyCoolDialog'], close;
  if (!d) {
    // if the dialog doesn't exist create one
    d = sfdcPage.dialogs['MyCoolDialog'] = new SimpleDialog('MyCoolDialog', false);
    // set general information on your dialog and finally run the create function
    d.setTitle('Vorgang auf Wiedervorlage');
    d.setWidth(600);
    d.createDialog();
  }
  // give your dialog some content (I usually use an iframe linking to another visualforce page
  // change the url, height, width to your needs
  $(d.dialog).find('#MyCoolDialogInner').html('