Lightning Compornentでモーダルウィンドウ作成

Lightning Design Systemのサンプルソースをベースに、ライトニングコンポーネントでモーダルウィンドウを作成してみました。

元のソースはこちらです。
https://www.lightningdesignsystem.com/components/modals/

とりあえず、そのままコピペしてみたところ、ライトニングコンポーネントではSVGタグが使えないようでエラーとなったので、<lightning:Icon>や<lightning:buttonIcon>に置き換えてみます。

before

<button 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="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
  <span class="slds-assistive-text">Close</span>
</button>

after

<lightning:buttonIcon title="Cloase"
                      alternativeText="Close window."
                      iconName="utility:close"
                      variant="bare"
                      size="large"
                      class="slds-modal__close slds-button--icon-inverse"/>

※今回はlightning:buttonIconタグでSVGを置き換えることができましたが、SVGタグが必要な場合には、独自コンポーネントの実装が必要のようです。
https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/

ついでに、ボタンも<lightning:button>に変えてみます。

before

<button class="slds-button slds-button--neutral">Cancel</button>
<button class="slds-button slds-button--brand">Save</button>

after

<lightning:button label="Cancel" iconPosition="right"/>
<lightning:button label="Save" variant="brand" iconPosition="right"/>

一応、これだけで表示はできましたが、このままだとウィンドが表示されたままになるので、表示/非表示を切り替えれるようににコントローラーを作成し、表示/非表示用のメソッドを追加します。

表示メソッド内でやることは二つです。

• slds-modalクラスを持つ要素に対して、slds-fade-in-openクラスを適用して、モーダルを可視状態にします。
• slds-backdropクラスを持つ要素に対して、slds-backdrop--openクラスを適用して、背景画像を表示します。

showModal : function(component, event, helper) {
    document.getElementsByClassName("slds-modal").forEach(function(value){
        value.classList.add('slds-fade-in-open');
    })
    document.getElementsByClassName("slds-backdrop").forEach(function(value){
        value.classList.add('slds-backdrop--open');
    })
},

非表示用メソッドの中では、これの逆をやります。

hideModal : function(component,event, helper){
    document.getElementsByClassName("slds-modal").forEach(function(value){
         value.classList.remove('slds-fade-in-open');
    })
    document.getElementsByClassName("slds-backdrop").forEach(function(value){
        value.classList.remove('slds-backdrop--open');
    })
}

モーダルの外にモーダル表示用のメソッドを呼ぶボタンを追加します。

<aura:component >
    <lightning:button label="Open Modal" onclick="{!c.showModal}"/>
    <div aria-hidden="false" id="modalWindow" role="dialog" class="slds-modal">

モーダルのクローズボタンから、モーダル非表示用のメソッドを呼ぶようにします。

before

<lightning:buttonIcon title="Cloase"
                      alternativeText="Close window."
                      iconName="utility:close"
                      variant="bare"
                      size="large"
                      class="slds-modal__close slds-button--icon-inverse"/>

after

<lightning:buttonIcon title="Cloase"
                      alternativeText="Close window."
                      iconName="utility:close"
                      variant="bare"
                      size="large"
                      class="slds-modal__close slds-button--icon-inverse"
                      onclick="{! c.hideModal }"/>

これで、とりあえずそれっぽいものができました。