function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
prazonprazon 

Modal dialog from Custom Button

How can I make a modal dialog page from a custom button. Guys if you have any idea please get back to me

Best Answer chosen by Admin (Salesforce Developers) 
prazonprazon

objective achieved

{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}



function insertScript(){ 
	
        var box = new SimpleDialog("hersh"+Math.random(), true); 
	      parent.box = box; 
	      box.setTitle("Create new Order"); 
	      box.createDialog(); 
	      box.setWidth(350); 
	      box.setContentInnerHTML("<apex:page standardController="Account"><h1>Congratulations</h1>This is your new Page<button class='btn'       onclick='window.parent.box.hide(); return false;'>Cancel</button></apex:page>"); 
	      box.setupDefaultButtons(); 
	      box.show(); 

} 


insertScript();

 

 

All Answers

Starz26Starz26

check out jquery dialog

 

www.jqueryui.com
Chamil MadusankaChamil Madusanka

Use following custom component

 

<apex:component >
	<apex:includeScript value="{!URLFOR($Resource.jq, 'js/jquery-1.5.1.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jq, 'js/jquery-ui-1.8.12.custom.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jq, 'css/ui-lightness/jquery-ui-1.8.12.custom.css')}"/>

	
	<div id="dialog">
		<table border="0" width="98%" cellpadding="7">
		<tr>
		<td valign="top">
		<div style="font-size:1.6em;">
			<strong>Dialog Box</strong>
		</div>
		<div> </div>
		<div style="font-size:1.3em;">This dialog box is created using a Jquery visualforce component!</div>
		</td>
		</tr>
		</table>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$("#dialog").dialog(
			{
				modal:true,
				closeable:false,
				resizable:false,
				draggable:true,
				overlay:{opacity:5.0,background:"red"}
			});
		});		
	</script>
</apex:component>

 visualforce page

 

<apex:page >
  
  <apex:form >
      <c:DialogBox ></c:DialogBox>
  </apex:form>
</apex:page>

 If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.
TejTej

http://wiki.developerforce.com/page/Tutorial:_Modal_Dialogs_in_Visualforce_using_the_Yahoo!_User_Interface_Library

 

refer to the above link
prazonprazon

Hi,

 

It is still leading the leading the url to a new page. I want it to comeout on the page layout itself rather navigating to other page.
Starz26Starz26

What solution did you implement.... a bit of detail can help to resolve your issue.
Chamil MadusankaChamil Madusanka

Are you working on a satandard page or visualforce page?
prazonprazon

I simply need something like window.showModalDialog(<page_name>,"",<options>). here in the option I need to have overlay property where I can set opacity:0.5 like this...

 

I am pasting this function in the custom button itself with javascript as an option.
prazonprazon

Hi

 

I am working in standard 'page layout' with custom button in the top
Chamil MadusankaChamil Madusanka

Try this solution

 

http://boards.developerforce.com/t5/Visualforce-Development/Modal-popup-over-entire-standard-object-detail-page/td-p/232441

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.
prazonprazon

 

will work on this and let u guys know. thanks for the link btw

 

 
prazonprazon

Hi,

 

I am trying the following code on the lines of the link..it is throwing some java script error:

 

{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}


function insertScript(script){ 
	var targetNode = document.createElement('div');	//	construct div for script injection 
	document.body.appendChild(targetNode); 
	try {
		var el = document.createElement('script');
			el.type="text/javascript";
			el.innerHTML = script;
		targetNode.appendChild(el); 
	} catch (e){ 
		var el = document.createElement('span'); 
		targetNode.appendChild(el); 
		el.innerHTML = "<br /><scr"+"ipt type='text/javascript' defer='defer'>"+script+"</script" + ">"; 
	} 

var box = new SimpleDialog("hersh"+Math.random(), true); 
	parent.box = box; 
	box.setTitle("Create new Order"); 
	box.createDialog(); 
	box.setWidth(350); 
	box.setContentInnerHTML("/apex/accMap?id={!Account.Id}"); 
	box.setupDefaultButtons(); 
	box.show(); 
} 

script = "function showmodal(){ 
window.showModalDialog("/apex/accMap?id={!Account.Id}", " ", " ");
}"; 

insertScript(script);

 
prazonprazon

objective achieved

{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}



function insertScript(){ 
	
        var box = new SimpleDialog("hersh"+Math.random(), true); 
	      parent.box = box; 
	      box.setTitle("Create new Order"); 
	      box.createDialog(); 
	      box.setWidth(350); 
	      box.setContentInnerHTML("<apex:page standardController="Account"><h1>Congratulations</h1>This is your new Page<button class='btn'       onclick='window.parent.box.hide(); return false;'>Cancel</button></apex:page>"); 
	      box.setupDefaultButtons(); 
	      box.show(); 

} 


insertScript();

 

 

This was selected as the best answer
prazonprazon

Thanks for help guys ..specially Chamil :)
prazonprazon

Now I need to know how to pass whole object not a object field into javascript of custom button.
ValnavjoValnavjo

Hello,

 

I just publish a post where I think everything related with modal dialogs on standard salesforce pages is well explained:

 

http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/

 

 

I hope you find it useful!

 

JVN
Sukhdeep Singh 1Sukhdeep Singh 1
Hi Valnavjo,

I am able to open the popup but neither its getting close & nor refreshing the parent window. Could you please explain which code will go into the VF page. 

Thanks,
 
Swapnil KambleSwapnil Kamble
@prazon

Your post dated March 28, 2012 helped a lot. I still need to extend a functionality.

here is my code javascript code

function insertScript(){ 
    var box = new SimpleDialog("test"+Math.random(), true);
  parent.box = box;
  box.setTitle("Submit Request Results");
  box.createDialog();
  box.setWidth(350);
  box.setWidth(350);
  box.setContentInnerHTML("<apex:page controller="ContinuationSOAPController ">
    <apex:form>
        <apex:commandButton value="Execute" action="{!startRequest}" reRender="result"/>    
    </apex:form>
        <apex:outputText id="result" value="{!result}" />
    </apex:page>");  
  box.show();
}

it gives me error 
Error: Field startRequest does not exist. Check spelling.

My question is can I use a public method [startRequest] form the page controller [ContinuationSOAPController ] in the box.setContentInnerHTML() function.
 
Jayadip HalakeJayadip Halake
@Parzon  Thanks for your details solution.

Following code is for : "Calling Visualforce Page" from page layout --> Custom Button.
  
{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}

var urlParam= ''; 
var url = '/apex/myCustomApexPage?'+urlParam+' ';

var  html = "<p align='center'> <button class='btn' onclick='window.parent.box.hide(); return false;'>Close Popup</button></p>  <p align='center'> <iframe id='iframeContentId' src='" + url  + "' scrolling='auto' width='95%'  height='300px'  scrolling='no' /> ";    

var title = " Popup Page ";

function insertScript(){ 	
        var box = new SimpleDialog("hersh"+Math.random(), true); 
              window.parent.box = box; 
	      box.setTitle(title ); 
	      box.createDialog(); 
	      box.setWidth(900); 	   
	      box.setContentInnerHTML(html); 
              box.setupDefaultButtons(); 
	      box.show(); 
} 
insertScript();