Hi There,
I'm currently developing a VF page with LDS. together with Modals. My objective is to load the Modal when a button is clicked. The issue I have is every time the button is clicked, it opens up the Modal. But sooner it will refresh the page and closes the modal. Here is the code:

VF Page for Modal

<div id="loadUnameConfirmationModal" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal" area-hidden="false">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <button onClick="hideUnameValidationModal();" 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="{!URLFOR($Resource.SDLS203,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>                                    
                            </svg>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="header43" class="slds-text-heading--medium">Connect To Salesforce Org</h2>
                    </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-form-element__row"> 
                            <div class="slds-form-element"> 
                                <div name="username_lbl" Class="slds-form-element__label slds-size--1-of-4">Enter Username</div>                                    
                                <div class="slds-form-element__control">
                                    <input type="text" id="uName_txt" class="slds-input" placeholder="Username" />
                                </div>
                            </div>                                
                        </div>

                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral" onClick="hideEnterDataModal();">Cancel</button>                        
                    <button class="slds-button slds-button--brand" onClick="showEnterDataModal();">Proceed</button>
                </div>
             </div>
          </div> 
          <div id="modalBackDrop" class="slds-backdrop"></div>

Here's the Button to call the Modal
 

<apex:commandButton id="selectDeferentloginbutton1" styleclass="slds-button slds-button--brand" value="Open Modal" onClick="showUnameValidationModal();"/>

And Here's the JS function to Load the Modal
 

function showUnameValidationModal(){                
                    j$('#loadUnameConfirmationModal').addClass('slds-fade-in-open'); 
                    j$('#modalBackDrop').addClass('slds-backdrop--open');

}

Please help to resolve the issue
Thanks, Mudi