1

I have a component created :

<aura:component description="CaseRelatedArticleComponent_ACE"
                implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId"
                controller="CaseCreationLightingController_ACE">
    <aura:attribute name="lstArticles" type="List" default="[]"/>
    <aura:handler event="c:CaseCreationEvent_ACE" action="{!c.showRelatedArticles}"/>
    <aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
    <aura:attribute name="strMessage" type="List" default="[]"/>
    <aura:attribute name="isError" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-page-header">
        <div class="slds-media">
            <div class="slds-media__body">
                <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Related Articles">Related
                    Articles</h1>
            </div>
        </div>
    </div>
    <aura:if isTrue="{!v.isError}">

        <!--###### MODAL BOX Start######-->
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                 aria-describedby="modal-content-id-1"
                 class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning:buttonIcon iconName="utility:close"
                                          onclick="{! c.closeModel }"
                                          alternativeText="close"
                                          variant="bare-inverse"
                                          class="slds-modal__close"/>
                    <aura:iteration items="{!v.strMessage}" var="errMessage">
                        <div style="padding: 10px" class="slds-theme_error">
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!errMessage}</h2>
                        </div>
                    </aura:iteration>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                </div>
                <!--###### MODAL BOX FOOTER Part Start ######-->
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral"
                                      label="Okay"
                                      title="Okay"
                                      onclick="{! c.closeModel }"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
        <!--###### MODAL BOX Part END Here ######-->
    </aura:if>

    <div class="slds-grid slds-wrap" style="background-color: white; min-height: 150px">
        <div class="slds-size_1-of-1">
            <div style="padding-top: 30px">
                <aura:renderIf isTrue="{!v.lstArticles.length > 0}">
                    <aura:iteration items="{!v.lstArticles}" var="strArticle">
                        <div style="padding: 10px">
                            <span class="slds-size_1-of-2"><a href="" onclick="{!c.gotoURL}"
                                                              id="{!strArticle.strLinkToArticle}">{!strArticle.strDisplayName}</a></span>
                        </div>
                    </aura:iteration>
                </aura:renderIf>
            </div>
        </div>
    </div>
</aura:component>

and there is a modal inside the component as:

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
             aria-describedby="modal-content-id-1"
             class="slds-modal slds-fade-in-open">

The issue is I have added this component on Contact layout, but the modal shows on middle of the contact layout page and not on Component. Is there any why to show modal or popup message on the component itself and not on the full page?

Updated

I have now removed the slds modal with just modal and now it shows on component , but not as a modal, it adds another div and shows there.

            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                     aria-describedby="modal-content-id-1"
                     class="modal slds-fade-in-open">
                <div class="modal">
                    <header class="slds-modal__header">
                        <div style="padding: 10px" class="slds-theme_error">
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create new
                                Case</h2>
                        </div>
                        <aura:iteration items="{!v.strMessage}" var="errMessage">
                            <div style="padding: 10px" class="slds-theme_error">
                                <h2 id="modal-heading-01"
                                    class="slds-text-heading_medium slds-hyphenate">{!errMessage}</h2>
                            </div>
                        </aura:iteration>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    </div>
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Okay"
                                          title="Okay"
                                          onclick="{! c.closeModel }"/>
                    </footer>
                </div>
            </section>
            <div class="backdrop backdrop_open"></div>

update 2

    <!--###### MODAL BOX Start######-->
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
             aria-describedby="modal-content-id-1"
             class="slds-modal slds-fade-in-open" style="position: inherit;">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <lightning:buttonIcon iconName="utility:close"
                                      onclick="{! c.closeModel }"
                                      alternativeText="close"
                                      variant="bare-inverse"
                                      class="slds-modal__close"/>
                <aura:iteration items="{!v.strMessage}" var="errMessage">
                    <div style="padding: 10px" class="slds-theme_error">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!errMessage}</h2>
                    </div>
                </aura:iteration>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            </div>
            <!--###### MODAL BOX FOOTER Part Start ######-->
            <footer class="slds-modal__footer">
                <lightning:button variant="neutral"
                                  label="Okay"
                                  title="Okay"
                                  onclick="{! c.closeModel }"/>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>

I used style position as inherit to show the position of the div on the component, but here it shifts the component div down, also the back drop is still covering the entire page. I can set a margin but the issue will be what if page is shrinked, then the backdrop wont work.

  • have you tried applying css rules to your modal to place it elsewhere? if yes - mind including what you have tried? – glls Aug 22 '18 at 13:54
  • I have not, because the modal comes on top of the page with background as faded. Even if we apply css, it wont just fade the component, it will fade off the entire page. – Nagendra K S Aug 22 '18 at 13:59
  • that doesnt meen you can't add CSS rules to postition the modal imo - can you give it a try and update your post? – glls Aug 22 '18 at 14:01
  • you want to be relative to that component remove slds-modal from class because it has style position:fixed and they have added some css stuff – vignesh Aug 22 '18 at 14:03
  • @Rahul Jain, any update? can you edit your post with our suggestions? – glls Aug 22 '18 at 15:14
0

This would answer only part of your question - how to do the backdrop effect (have a transparent disabled div on your component only).

I have created a component for that and I use it for disabling a component while still showing it:

Backdrop COMPONENT MARKUP

<!--
 This component displays a backdrop on all layer of parent component
 to show a "disabled" efect
 should be inside a position:relative css style
 -->
<aura:component>
    <aura:attribute name="show" type="Boolean" description="show the backdrop?" default="false"/>
    <aura:if isTrue="{!v.show}">
        <div class="component-backdrop component-backdrop_open" />
    </aura:if>
</aura:component>

Backdrop DESIGN (css)

/*this is the backdrop itself - hidden*/
.THIS.component-backdrop,
.THIS .component-backdrop {
    transition-duration: 0.4s;
    background: rgba(181, 196, 210, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 9000;
}
/*this is to enable the backdrop view*/
.THIS.component-backdrop_open,
.THIS .component-backdrop_open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s linear 0s;
}

HOW TO USE Backdrop COMPONENT

you create an instance of it in the component that you want to gray out, you have to put it inside an element that has position:relative style. then you can play with the show attribute - set it to true and the backdrop shows, set it to false and the backdrop appears:

<aura:attribute name="isShowBackdrop" type="Boolean" description="show the backdrop?" default="false"/>
<div style="position:relative;">
    <c:Backdrop show="{!v.isShowBackdrop}" />
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.