• Amarkant Jadhav
  • NEWBIE
  • 0 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
I have developed new Modal using lightning desing system.In standard modal new button pop up appears on whole broweser lightning page. But when I desgined using SLDS it will come up but still salesforce header bar is accesible which will display on my modal component

standard way :
User-added image

SLDS Modal :
User-added image

Component Code :
<aura:component controller="QuickInvestorController" implements="force:appHostable">
   
        <div class="slds-modal slds-fade-in-open" style="display:none;" aria-hidden="false" role="dialog" id="QuickInvestor_modal">
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Quick Investor</h2>
                    <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}">
                        <c:svg class="slds-button__icon slds-button__icon--large"
                               xlinkHref="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#close"
                               ariaHidden="true"
                               />
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="form-element__group">
                        <div class="slds-form-element__row">
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputText aura:id="newinvestor" label="Investor Contact Role"
                                              labelClass="slds-form-element__label" class="slds-input"/>
                            </div>
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputSelect aura:id="newinvestor" labelClass="slds-form-element__label"
                                                required="false" class="slds-input" label="Default Email">
                                    <ui:inputSelectOption text="Work1" label="Work1"/>
                                    <ui:inputSelectOption text="Work2" label="Work2"/>
                                </ui:inputSelect>
                            </div>
                        </div>
                    </div>
                    <div class="form-element__group">
                        <div class="slds-form-element__row">
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputText aura:id="expname" label="Account Name"
                                              class="slds-input" labelClass="slds-form-element__label"   value="{!v.quickinvestor.Name}"
                                              required="true"/>   
                                
                            </div>
                            <div class="slds-form-element slds-size--1-of-2">
                                <ui:inputNumber aura:id="expname" label="Email Salutation"
                                                class="slds-input"
                                                labelClass="slds-form-element__label"
                                                value="{!v.quickinvestor.Email_Salutation__c}"
                                                required="true"/>       
                            </div>
                        </div>
                    </div>
                    <!-- -----------Fields --------------------------------->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral">Cancel</button>
                    <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
                </div>
            </div>
        </div>
         <div class="slds-backdrop slds-backdrop--open" id="QuickInvestorBackground" style="display:none;"></div>
   
</aura:component>