function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Display pop up clicking on SAVE button

Hello Friends,

I am new to development and i am trying to build pop up screen .

when ever i change my status from closed to open before clicking on save button i would like to get a java script pop up to show the message.

Can anyone help me please.


Hi Shruthi,

Please check the below code.For custom object Car__c You can make the fields changes depending upon the requirement.

VisualForce Page:
<apex:page Controller="Modalpopup" id="pg" >
 <apex:form id="ff">
   <apex:pageBlock >
     <apex:pageBlockTable value="{!mycar}" var="ca" id="pbt">
     <apex:column >
     <apex:commandLink value="{!ca.Name}" action="{!RecordId}" >    
     <apex:param value="{!}" name="nam" assignTo="{!id1}" />     
     <apex:column value="{!ca.Price__c}"/>
   <apex:outputPanel id="output" styleClass="customPopup" layout="block" rendered="{!displayselrecord}">
       <apex:pageBlock title="Record Detail"> 
       <apex:pageBlockSection >
         <apex:pageBlockSectionItem >  
           <B> Name:</B><apex:inputField value="{!selectedcar.Name}"/>
           <apex:pageBlockSectionItem >
           <B> Cost:</B><apex:inputField value="{!selectedcar.Price__c}"/>
          <apex:pageBlockSectionItem >
           <apex:commandButton value="Save" action="{!Updatepopup}" rerender="pbt"/>
           <apex:pageBlockSectionItem >
            <apex:commandButton title="Close" value="X" action="{!closepopup}" reRender=""/>
       <style type="text/css">
        .customPopup {
           background-color: #6495ed;
            border-style: solid;
            border-width: 3px;
            left: 20%;
            padding: 5px;
            position: absolute;            
            /* These are the 3 css properties you will need to tweak so the pop 
                                    up displays in the center of the screen. First set the width. Then set 
                                    margin-left to negative half of what the width is. You can also add 
                                    the height property for a fixed size pop up.*/
            width: 500px;           
            top: 20%;
Apex code:
public class Modalpopup{       
public boolean gre{get;set;}
     public Boolean displayselrecord { get; set; }    
    public id id1{get; set;}    
    public List<Car__c> mycar{set; get;}
    public Car__c selectedcar{ set; get; }    
public Modalpopup (){
mycar = [select Name, Price__C from Car__c];
public PageReference RecordId() {
    selectedcar=[select Name, Price__c from Car__c where id = : id1];
   displayselrecord = true;
    return null;        
public PageReference closepopup() {
     displayselrecord = false;     
        return null;
 public PageReference Updatepopup() {
       update selectedcar;
                     mycar = [select Name, Price__C from Car__c];
       displayselrecord = false;
        return null;
I hope it will be helpful. 

Please mark it as they removed from unanswered questions.and more appear as the proper solution to similar kind of issue. 

Best Regards,

Hi Rahul,

Thanks for replying but i would like to display an alert message.

when ever the status changes from closed to open, is there any other way we can do.

Jasper WallJasper Wall

Hi Shruthi,
Use Prompt feature of lightning design system
you need a vf page, see below link and go to Prompt section,
<div role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal--prompt">
  <div class="slds-modal__container">
    <div class="slds-modal__header slds-theme--error slds-theme--alert-texture">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
        <svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        <span class="slds-assistive-text">Close</span>
      <h2 class="slds-text-heading--medium" id="prompt-heading-id">Service Unavailable</h2>
    <div class="slds-modal__content slds-p-around--medium">
      <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
        quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
    <div class="slds-modal__footer slds-theme--default">
      <button class="slds-button slds-button--neutral">Okay</button>
<div class="slds-backdrop slds-backdrop--open"></div>

Let us know if it helps,