【Salesforce】Lightning Design Systemでモーダル画面を作る

5418 ワード
Salesforce LightningDesignSystem modal Salesforce テキストリンク

モーダル

以下がモーダル画面のサンプルコードです。

<apex:page title="Test" showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="ja">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <apex:slds />
    </head>

    <body style="padding: 8px;">
      <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">
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">ヘッダーのタイトルです。</h2>
            <p class="slds-m-top_x-small">ヘッダーの本文です。</p>
          </header>

          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>本文です。</p>
          </div>

          <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral">キャンセル</button>
            <button class="slds-button slds-button_brand">保存</button>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
    </body>
  </html>
</apex:page>

以下がモーダル画面の作成イメージです。

モーダル画面の構成

要素 備考
ヘッダー（header） モーダルのヘッダー部分です。不要であれば削除しても問題ありません。
コンテンツ（div） モーダルのコンテンツ部分です。本文を記載します。
フッター（footer） モーダルのフッター部分です。通常はボタンを配置します。

参考

■Modals
https://lightningdesignsystem.com/components/modals/