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
Karunat1Karunat1 

I want to show popup after clicking on button

I have a table of contacts along with checkboxes and have also Delete button on vf page.

Scenario:
When I click on delete button then pop should be open with message "You have to select checkbox"..

 
S95S95
hi Karuna03,
You can use jQuery to Generate Modal Pop-Up when Clicked
For more info,refer the link:
https://www.pair.com/support/kb/how-to-use-jquery-to-generate-modal-pop-up-when-clicked/

Thank you.
Karunat1Karunat1
But I want using visualforce Page
Asitha_RajuAsitha_Raju
Hi,

Please try this code to display a pop in visualforce page:
Controller: 
public class popUp {
 
    public boolean displayPopup {get; set;}
 
    public void closePopup() {
        displayPopup = false;
    }
 
    public void showPopup() {
        displayPopup = true;
    }
}

Visualforce Page: 
<apex:page controller="popUp" >
 <apex:form >
        <apex:commandButton value="Delete" action="{!showPopup}" rerender="popup"/>
        <apex:outputPanel id="popup">
            <apex:outputPanel styleClass="customPopup"  rendered="{!displayPopUp}">
               You have to select checkboxes <br/><br/><br/>
                <apex:commandButton value="Ok" action="{!closePopup}" rerender="popup"/>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>
    <style type='text/css'>
.customPopup{
    background-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    position: fixed;     
    margin-top: 250px;
    margin-bottom: 500px;
    margin-left: 180px;
    padding: 5px;
    margin-right: 80px;
    box-shadow: 0px 3px 7px rgba(1, 1, 1, 1);
    background: #fff;
    width: 350px;
    top: 10px;   
    max-width: 700px;
}
</style>
</apex:page>

Hope this works for you. If it helps you,then please mark it as the best answer so that other could find it useful.
Thanks.
 
Ajay K DubediAjay K Dubedi
Hi Karuna,

I hope you will understand this.
---------------ApexClass---------------------
  
public with sharing class TestPopup {
   public boolean displayPopup {get; set;}         
    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }
}


-------------VF_Page-----------------------------
  
<apex:page Controller="TestPopup">
<apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General. 
        </apex:pageBlock> 
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
               You have to select checkbox.<br/><br/><br/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>
 
    <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup 
            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 add 
            the height property for a fixed size pop up if you want.*/
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }
    </style>

</apex:page>



Please try below URL.
  https://developer.salesforce.com/forums/?id=906F000000097X9IAI
  https://salesforce.stackexchange.com/questions/169285/popup-in-visual-force-page

Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.

Thank You
Ajay Dubedi