You need to sign in to do that
Don't have an account?
Amarkant Jadhav
Lightning : Issue in slds modal
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 :
SLDS Modal :
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>
standard way :
SLDS Modal :
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>
in the CSS :
.THIS .xcs-fix-max-height{
max-height: 200px;
}
In my component :
<div role="dialog" class="slds-modal slds-modal--large slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCancel}">
<lightning:icon iconName="utility:close" size="small" />
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading--medium">{!v.windowTitle}</h2>
</div>
<div aura:id="xid-cmp-body" class="slds-modal__content slds-p-around--medium slds-is-relative xcs-fix-max-height">
<lightning:spinner variant="brand" size="small"/>
<!--####################################################### -->
<!-- The component is dynamically loaded here -->
<!--####################################################### -->
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral" onclick="{!c.handleCancel}">{!$Label.c.GLO_Annuler}</button>
<button class="slds-button slds-button--brand" disabled="{!v.disableSave}" onclick="{!c.sendActionSave}">{!v.saveButtonText}</button>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
http://www.sfdcmonkey.com/2017/04/15/modal-box-lightning-component-salesforce/