slds-modalでVFの中のモーダル画面試してみた

# Visualforceでのモーダル画面
　「Visualforceでのモーダル画面の表示でいい方法がないか」とTwitterで呟いてみたところslds-modalが良いという声をいただいたので簡単に試してみました。

# 成果物
```Modal.vfp
<apex:page lightningStylesheets="true" showHeader="false">
  <apex:slds />

  <div class="slds-grid slds-wrap">

    <div class="slds-text-align_center slds-col slds-p-around_large slds-large-size_1-of-8 slds-x-small-size_8-of-8 slds-medium-size_2-of-8 slds-p-bottom_medium slds-p-right_medium">
      <button class="slds-button slds-button_neutral" onClick="document.getElementById('id01').style.display='block'; document.getElementById('id02').style.display='block';">Open</button>
    </div>

    <div id="id02" style="display: none;">
      <section role="dialog" tabindex="2" aria-labelledby="modal-heading-02" aria-hidden="true" aria-describedby="modal-content-id-2"
        class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
          <header class="slds-modal__header">
            <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Modal Header NUMBER 2</h2>
          </header>
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
            <h1> TEST MODAL NUMBER 2. </h1>
          </div>
          <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral" onclick="document.getElementById('id02').style.display='none'">Next</button>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
    </div>

    <div id="id01" style="display: none;">
      <section role="dialog" tabindex="1" aria-labelledby="modal-heading-01" aria-hidden="true" aria-describedby="modal-content-id-1"
        class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
          <header class="slds-modal__header">
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header Number 1</h2>
          </header>
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <h1>Test Modal Number 1. </h1>
          </div>
          <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral" onclick="document.getElementById('id01').style.display='none'">Close</button>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
    </div>


  </div>


  <script>
  </script>

</apex:page>
```

画面1
<img width="960" alt="img1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394418/f22432e5-7c7b-3163-0207-0313bc96daa0.png">

画面2
<img width="960" alt="img2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394418/ea38ea43-f57c-8b35-7a04-7d868acd364e.png">

画面3
<img width="960" alt="img3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394418/fd4b737a-d3ad-1b28-9e17-be0e0cb16d93.png">

# 感想
　お手軽にモーダルが作成できました。今回はさらにウィザード形式で確認画面を進めるような画面を作りました。
画面１「Open」ボタン⇒画面２開く⇒「Next」ボタン⇒画面３開く⇒「Close」ボタン⇒画面１に戻る
という感じです。

まだまだVisualforceでの画面開発が行われている中で、モーダル画面の開発の共通化された方法がないように思えました。困った方はslds-modalを使用してみてはいかがでしょうか？

# 参考
https://www.lightningdesignsystem.com/components/modals/