I have a VF page with couple of buttons. I need to show a popup when one of the buttons is clicked. Something like a modal popup where user has to fill in something or click the cancel button in the popup page before to go back to the calling page.
Thanks
UPDATE
Lets assume i would need to have lookup for contact in VF page and if the contact is not there then we need to create a new contact record. So i am kind of trying to create a contact record from the same page by just clicking a button which in turn displays the fields of contact and save of it creates the contact record.So the user doesnt need to go away from this page to create the new contact record.
Attribution to: Prady
Possible Suggestion/Solution #1
We use a jQuery plugin to implement an iFrame, or alternatively, a modal containing an iframe with twitter bootstrap. This is for the more complex case that you want to show another VF page with it's own instantiation of a controller, etc.
UPDATE
This is psuedo-code, you need to play with the combination of JS, actions, and page layouts, css to get your settings correct to make them appear fluid. If your still stuck let me know.
Start by creating a VF page that uses the standardcontroller for a contact record:
Page (mymodalpage.page):
<apex:page standardController="Contact" showHeader="false" sidebar="false" extensions="contactExtensions">
<script type="text/javascript">
if({!closeDialog}){
// javascript to close dialog, when the page posts back after the
// save, you'll have '{!closeDialog}' set to 'true' which will close the dialog.
}
</script>
<apex:form target="_self">
<apex:pageBlock title="Create Contact" mode="edit" id="thePageBLock">
<apex:pageBlockButtons >
<apex:actionSupport event="onclick" rerender="thePageBlock"/>
<apex:commandButton action="{!saveAndClose}" value="Save" />
<apex:commandButton action="{!cancel}" onclick="parent.dialog.dialog('close');return false;" value="Cancel" />
<apex:commandButton value="Cancel"/>
<!-- this is where you would place your input fields for contact -->
</page>
Controller (contactExtension.cls):
public class contactExtension{
Contact c {get; set;}
ApexPages.StandardController controller {get; set;}
Public Integer closeDialog {get; set;}
public contactExtension(Apexpages.standardcontroller controller){
controller = cntrl; //pass the standard controller into your extension
c = controller.getRecord();
closeDialog = false;
}
public PageReference saveAndClose(){
closeDialog = true;
c.save(); // call the standard save
return null;
}
}
Example (parent page):
<button onclick="javascript: displayAndOpenModal();">Open Modal</button>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p><iframe src="{!URLFOR($Page.mymodalpage)}" id="my-modal-iframe" /></p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
Modal Source: http://twitter.github.com/bootstrap/javascript.html#modals
Attribution to: jordan.baucke
Possible Suggestion/Solution #2
weve used this before: http://www.tehnrd.com/visualforce-pop-up/ but that aside.
If you are using a lookup window to find a contact, what about creating a custom lookup window to which you add a "create contact" button. Use the create button to replace the lookup content with new contact fields right in that window, simple as re-rendering the page using render flags. That way its in keeping with standard salesforce UX and your users will possibly embrace the custom functionality more easily.
The only moderately difficult part is getting the selection back from the child lookup window to the parent.
These functions go on the parent VF page:
function openPopupFocus(a, b, c, d, e, f, g, k) {
closePopup();
if (f) {
if (lastMouseX - c < 0)
lastMouseX = c;
if (lastMouseY + d > screen.height)
lastMouseY -= lastMouseY + d + 50 - screen.height;
lastMouseX -= c;
lastMouseY += 10;
e += ",screenX=" + lastMouseX + ",left=" + lastMouseX + ",screenY=" + lastMouseY + ",top=" + lastMouseY
}
curPopupWindow = window.open(a, b, e, false);
curPopupWindow.focus()
if (k)
closeOnParentUnloadWindow = win
}
function closePopup() {
if (closetimer) {
clearTimeout(closetimer);
closetimer = null
}
if (curPopupWindow != null) {
try {
if (curPopupWindow.confirmOnClose) if (curPopupWindow.confirm(curPopupWindow.confirmOnCloseLabel)) {
curPopupWindow.confirmOnClose = false;
curPopupWindow.focus();
return false
}
curPopupWindow.close()
} catch (a) {}
curPopupWindow = null
}
}
function doLookupPick(a,b,c,d){
$(a).val(b);
$(c).val(d);
closePopup();
}
the link to open the window
openPopupFocus(%27/apex/<VF PAGE NAME>?filter=item%27, %27CCBCCLookup%27, 420, 490, %27width=420,height=490,toolbar=no,status=no,directories=no,menubar=no,resizable=yes,scrollable=no%27, true);
This function goes on the custom lookup page:
function sendToParent(selectedId,selectedName){
top.window.opener.doLookupPick(<hidden field dom id>,
<selected sfObject ID>,
<text input field dom id>',
<text input contact name>);
}
Attribution to: ebt
Possible Suggestion/Solution #3
Here's a dated but nice Visualforce tutorial that uses a hidden-DIV approach as opposed to actually rendering JavaScript popups: Tutorial: Modal Dialogs in Visualforce using the Yahoo! User Interface Library.
Attribution to: Adam
Possible Suggestion/Solution #4
You might also look at BlockUI, a great modal plugin for jQuery. Here's a blog post on using it with VF:
Attribution to: joshbirk
Possible Suggestion/Solution #5
Navigate to this JQuery UI Modal:
http://jqueryui.com/demos/dialog/#modal
and use
$( ".selector" ).dialog({ modal: true });
Attribution to: Jitendra Zaa
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/232