モーダル
以下がモーダル画面のサンプルコードです。
<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/