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
Bryan MacoyBryan Macoy 

How to make my vfp pop up in a modal dialog box after clicking custom listView button?

I create a List View button that updated selected records. Here is my code:



** Visual Force Page **

<apex:page standardController="custom_Object" extensions="custom_Object_Controller" recordSetVar="givenRecords" lightningStylesheets="true">


    <!--- Display message if no records have been selected -->
    <apex:form id="noRecords"  rendered="{!isRecordSelected ==false}" style="font-size:14px;font-weight:bold;" >
        <apex:pageMessages ></apex:pageMessages>
        <apex:commandButton action="{!Cancel}" value="Back" style="margin-left:200px;"/>  
    </apex:form>
    
    
    <!-- Display Selected Records -->
    <apex:form id="withRecords"  rendered="{!isRecordSelected ==true}" style="font-size:14px;font-weight:bold;" >
        <html>

            <body>
                
                <table>
                    <tr>
                        <th>Company Name<hr></hr></th>
                        <th>Contact Name<hr></hr></th>
                        
                    </tr>
                    
                    <apex:repeat value="{!givenRecords}" var="record">
                        <tr>
                            <td>
                                <apex:inputField value="{!record.CompanyName__c}"/>
                            </td>
                            <td>
                                <apex:inputField value="{!record.ContactName__c}"/>
                            </td>
                        </tr>
                    </apex:repeat> 
                </table>
            </body>
            
          <apex:commandButton action="{!Cancel}" value="Back" style="margin-left:200px;"/>     
            <apex:commandButton value="Save" action="{!save}"/>
        </html>
         </apex:form>
</apex:page>
--------------------------------------------------
** Controller **

public without sharing class custom_Object_Controller {

    public List<custom_Object_Controller> givenRecords{get;private set;}
    public Boolean isRecordSelected {get;set;}
 
    
    // Constructor
    public custom_Object_Controller(ApexPages.StandardSetController stdSetController){
        // Returns all selected records
        givenRecords= (List<custom_Object_Controller>) stdSetController.getSelected();
        if(stdSetController.getSelected().isEmpty()){
            isRecordSelected = false;
            ApexPages.addMessage(new ApexPages.message(ApexPages.severity.WARNING,'No records have been selected.'));
        }else{
            isRecordSelected = true;
        }
    }
    
    public PageReference save(){
        try{
         update givenRecords;
        } catch(Exception e){
            System.debug('Exception: ' + e);
        }
        return null;
    }
}
------------------------------------------------

How can I have it pop up in a dialog box instead of opening to a new vfp window?