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

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

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

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

```html: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>
```

```html: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>`に変えてみます。

```html:before
<button class="slds-button slds-button--neutral">Cancel</button>
<button class="slds-button slds-button--brand">Save</button>
```

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

![image](https://qiita-image-store.s3.amazonaws.com/0/126858/e6565404-d8bf-9df5-2b99-99c8f2770cf4.png)

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

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

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

```javascript
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');
    })
},
```

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

```javascript
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');
    })
}
```

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

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

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

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

```html: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 }"/>
```

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

![image](https://qiita-image-store.s3.amazonaws.com/0/126858/a79c79f7-53ba-60c3-8733-74610e05d77f.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/126858/cbdbb757-c2f1-2205-c576-754dc9c88a9b.png)