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

4034 ワード
Lightning Salesforce Visulaforce Salesforce テキストリンク

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

画面2

画面3

感想

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

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

参考