+ Start a Discussion
LBSLBS 

Lightning Design - issue with Loading Modal

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


 
Best Answer chosen by LBS
LBSLBS
Recieved the answer from another community. Its just a matter of adding return false; after the JS call. Format is;
onClick="showUnameValidationModal(); return false;"

 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi,

Please check with below link with similar issue from stack exchange community. Hope this helps.

Mark this as solved if it's resolved.

Regards,
Nagendra.
LBSLBS
Recieved the answer from another community. Its just a matter of adding return false; after the JS call. Format is;
onClick="showUnameValidationModal(); return false;"

 
This was selected as the best answer