+ Start a Discussion
ChinnoyChinnoy 

popup is not working in the vf page

Hi I need to show a popup on click of button if all conditions is satisfied or else i need to show error message.

please find the code below.

VF:
<apex:page controller="BloodDonorReg"  showHeader="false" standardStylesheets="false">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    
    <div class="orb-nav-section orb-nav-blocks" style=" position: fixed;
                                                       top: 0%;
                                                       left: 7.6%;"> <img src="{!$Resource.BloodLogo}" width="290" height="140" alt="Blood"/></div>
    <style>
        body {
        
        background-image:white;
        background-repeat:repeat;
        background-size: cover;
        width: 100%;
        <!-- backgroundColor: 'transparent';
-background-position: center ;-->
        }
    </style>
    <style>
        form {
        margin-top: 0px;    
        }
        .pbHeader {
        
        color: white !important;
        padding:20px;
        font-size: 10px;
        
        }
    </style>
    <style>
        .tableClass tbody{text-align:center}
    </style>
    
    <div>
        
    </div>
    <style>
        label{
        color: white !important;
        }
        body  .bPageBlock
        {
        
        
        background-image: url('{!$Resource.blood2}'); ;
        background-size:cover;
        top:21.7%;
        right:6%;
        bottom:35%;
        height:370px;
        width:1180px;
        align:center;
        position:absolute;
        
        
        }
        color:red;
    </style>
    <h1>
        
    </h1>
    <apex:form >
        <body>
            <marquee scrollamount="3" style="width:1180px;top:14.6%;left: 6.2%; position:absolute;border-radius: 5px; padding: 10px; background-color: white; font-weight: bolder; font-size: 14px; margin: 20px; color: Red;">
                ♦Welcome to WE DOnate BLOOD; Development of this App is still in progress.Stay tuned for more updates.Thanks♦
            </marquee>
          
            <apex:pageBlock title="Welcome Donor"  >
                <div class="container">
                    <div class="row">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="grp">Name:</label>
                            <div class="col-sm-1">          
                                <apex:inputField style="width:155px;height: 23px" value="{!bloodDonor.Name}"/>
                            </div>
                        </div>
                    </div><br/>
                    <div class="row">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="grp">Select Blood Group:</label>
                            <div class="col-sm-1">          
                                <apex:inputField style="width:155px;height: 23px" value="{!bloodDonor.BloodGroup__c}"/>
                                <apex:outputText rendered="{!errorMessage}" value="Please select blood group" style="color:black"></apex:outputText>
                            </div>
                        </div>
                    </div><br/>
                    <div class="row">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="grp">Phone Number:</label>
                            <div class="col-sm-1">          
                                <apex:inputField style="width:155px;height: 23px" value="{!bloodDonor.PhoneNumber__c}" html-placeholder="9999999999" html-maxlength="10"/>
                            </div>

                        </div>
                    </div><br/>
                    <div class="row">
                        <div class="form-group"> 
                            <label class="control-label col-sm-2" for="pwd">Select State:</label>
                            <div class="col-sm-1">
                                <apex:inputField style="width:155px;height: 23px" value="{!bloodDonor.State__c}"/>
                            </div>
                        </div>
                    </div><br/>
                    <div class="row">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="state">Select District:</label>
                            <div class=" col-sm-1">
                                <apex:inputField style="width:155px;height: 23px" value="{!bloodDonor.District__c}"/> 
                            </div>
                        </div>
                    </div><br/>
                    <b><apex:commandButton action="{!saveDetails}" value="Save" style="margin-left:20%;width:60px;" rerender="a"/></b>
                </div>
              
            </apex:pageBlock>
            <apex:outputPanel id="a">
            <apex:outputPanel id="popInnerOutputPnl" layout="block" rendered="{!poprender}" styleClass="custPopup" >
                <div style="background-color:red" align="center">
                    <apex:outputText value="Thanks for Registration" style="padding:140px;font-family:serif; font-size: 20px; font-weight: bold;color:white;white-space:pre " escape="false"/>
                </div>
                <br/>
                <br/>
                <div align="Center">
                    <h1>
                        Thanks for thinking to Save a life
                    </h1>
                </div>
                <br/>
                <div align="center">
                    <apex:commandButton value="Okay" action="{!redirectPopup}" style="left:45%;top:75%;position:absolute;"  /> 
                </div>
             </apex:outputPanel>
        </apex:outputPanel>
        </body>  
        
    </apex:form>
     
</apex:page>

class:
public class BloodDonorReg {
    
    public WT_BloodDonor__c bloodDonor { get; set; }
    public boolean poprender{get;set;}
    public Boolean errorMessage {get;set;}
    public string CustomerrorMessage {get;set;}
    public Boolean errorMessage1 {get;set;}
    
    public BloodDonorReg() {
        
        bloodDonor = new WT_BloodDonor__c();
        
        errorMessage = false;
        
        errorMessage1 = false;
        poprender = false;
    }
    
    
     public PageReference redirectPopup(){
       PageReference p = new PageReference('/apex/BloodDonorRegistration');
        p.setRedirect(true);
        return p;
    }
    public void saveDetails() {
        
        if((bloodDonor.BloodGroup__c != null || bloodDonor.BloodGroup__c != '') &&
           
           (bloodDonor.Name__c != null || bloodDonor.Name__c != '') &&
           
           (bloodDonor.PhoneNumber__c != null ) &&
           
           (bloodDonor.State__c != null || bloodDonor.State__c != '') &&
           
           (bloodDonor.District__c != null || bloodDonor.District__c != '')
           
          ){
              upsert bloodDonor;
              poprender = true;
          }
        if(bloodDonor.Name__c == null || bloodDonor.Name__c == ''){
            CustomerrorMessage = system.label.test;
            ApexPages.addMessage(new ApexPages.message(ApexPages.Severity.ERROR, CustomerrorMessage));
        }
        if(bloodDonor.BloodGroup__c == null || bloodDonor.BloodGroup__c == null){
            CustomerrorMessage = system.label.test;
            errorMessage = true;
        }
        else {
            errorMessage = false;
        }
        if(bloodDonor.Name__c == null || bloodDonor.Name__c == null){
            errorMessage1 = true;
        }
        else{
            errorMessage1 = false;
        }
    }
}