Layer

レイヤーポップアップ・ポップアップに関する機能の説明と使用例です。

レイヤーポップアップ

テキストの内容を強調させたい場合や、追加説明の記入が必要となる場合に使用できます。

<div module="モジュール名" class="ec-base-layer">
    <div class="header">
        <h3>レイヤーポップアップ</h3>
    </div>
    <div class="content">
        詳細説明テキスト
    </div>
    <div class="ec-base-button">
        <a href="#none" class="btnSubmitFix sizeS">確認</a>
        <a href="#none" class="btnNormalFix sizeS">キャンセル</a>
    </div>
    <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.png" alt="閉じる" /></a>
</div>

ポップアップ

新しいウィンドウを表示させたい場合に使用できます。bodyにid="popup"が宣言されています。

<div id="popup">
    <div module="モジュール名" class="ec-base-layer">
        <div class="header">
            <h1>ポップアップ</h1>
        </div>
        <div class="content">
            詳細説明テキスト
        </div>
        <div class="ec-base-button">
            <a href="#none" class="btnSubmitFix sizeS">確認</a>
            <a href="#none" class="btnNormalFix sizeS">キャンセル</a>
        </div>
        <a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.png" alt="閉じる" /></a>
    </div>
</div>

Cafe24 Smart design Support

Layer

レイヤーポップアップ

ポップアップ