Hi,

I am using visualforce page(not lightning component) and in the page I use slds modal. When I click a button in the page it will open the modal above the page and the parent page greyed out. I want to pass some field values of parent page to modal. Can any one help how to do that. Modal is working fine but want a idea to pass value to modal.

<apex:slds /> <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<!--Button-->
<button class="slds-button slds-button--brand" id="toggleBtn" onclick="openModal(); return false;">Find</button>

<div class="search">
            <div class="slds-modal" aria-hidden="true" role="dialog" id="modal">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Search</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <div class="modal-body" id="modBody">
                            <table class="slds-table slds-table_bordered slds-table_cell-buffer">                               
                                <tr>                                    
                                    <td>
                                        Zip code:
                                    </td>
                                    <td>
                                        <apex:inputText value="{!inputZipCode}" id="txtZipCode" maxlength="9" />
                                    </td>
                                </tr>                                 
                            </table>
                        </div>
                    </div>
                  
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="closeModal()">Cancel</button>
                        <apex:commandButton value="Search" reRender="modResult, modres" />
                    </footer>
                </div>
            </div>
            <div class="slds-backdrop" id="backdrop"></div>
        </div>
            <!-- Modal Toggle Script -->
        <script>
            j$ = jQuery.noConflict();
            
            //Modal Open
            function openModal(){
              j$('#backdrop').addClass('slds-backdrop--open');
              j$('#modal').addClass('slds-fade-in-open');
            }
            
            //Modal Close
            function closeModal(){
              j$('#modal').removeClass('slds-fade-in-open');
              j$('#backdrop').removeClass('slds-backdrop--open');
            }
        </script>