ランディングページでキャンペーン内容などをモーダルで表示するサンプル


モーダルにColorbox使います。

Colorboxに必要なjs、cssを読み込みます。

<script type="text/javascript" src="/library/common/scripts/jquery.js"></script>

<!-- colorbox -->
<link type="text/css" rel="stylesheet" href="/library/libs/colorbox/colorbox.css" />
<script type="text/javascript" src="/library/libs/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/library/libs/colorbox/i18n/jquery.colorbox-ja.js"></script>
<script type="text/javascript" src="/library/libs/colorbox/colorbox.js"></script>
<!-- /colorbox -->

1.iframeを表示する場合

aタグにrel="modal-iframe"を記述すると、リンク先をモーダルにiframeで表示します。

<a href="【リンク先URL】" rel="modal-iframe" target="_blank">【テキストラベル、または バナー や ボタンなど】</a>
【LP用】iframeをモーダルで表示する

2.画像を表示する場合

aタグにrel="lightbox"を記述すると、リンク先画像をモーダルで表示します。

<a href="【リンク先画像URL】" rel="lightbox" target="_blank">【テキストラベル、または バナー や ボタンなど】</a>
【LP用】画像をモーダルで表示する

3.インラインHTMLを表示する場合

aタグにrel="modal-inline"を記述すると、リンク先画像をモーダルで表示します。

<a href="#【ID】" rel="modal-inline">【テキストラベル、または バナー や ボタンなど】</a>

<!-- 表示するインラインHTMLは非表示のタグでラップします。 -->
<div style="display:none">
    <section id="【ID】">
        <h3>口座開設キャンペーン</h3>
        <p>最大10,0000円キャッシュバック</p>
    </section>
</div>
【LP用】インラインHTMLをモーダルで表示する

口座開設キャンペーン

最大10,0000円キャッシュバック