楽天市場のポップアップ（モーダルウィンドウ）の設置方法

2017年8月31日2023年6月7日

コンテンツを浮かび上がるようにポップアップ表示させるモーダルウィンドウ。
お知らせ等の他に、楽天ならクーポン等を設置して告知する事ができます。
今回はこのモーダルウィンドウをCSSだけで設置する方法(JavaScriptなし)をご解説していきます。

モーダルウィンドウとは

モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。
モーダルウィンドウが表示されると、その中で指定された操作を完了するかキャンセルするかして、そのウィンドウを閉じない限り、親ウィンドウ側に対する操作ができないようになる。このため、モーダルウィンドウはユーザーに特定の操作をさせたり、確認を促したりといった目的で用いられることが多い。
モーダルウィンドウのうち、Windowsなどおけるダイアログボックスがモーダルウィンドウになっているものを、特に「モーダルダイアログ」と呼ぶ。
最近では、Webユーザインターフェースにおいてモーダルウィンドウを実現する例も多数登場している。「LightBox」や「ThickBox」のように、JavaScriptのライブラリとして公開されている場合も多い。

ようは任意のコンテンツを、必ず目に留めさせる事ができます。

ユーザーによってはウザいと感じる人もいるかもしれませんが、クーポン等ユーザーメリットのある情報ならユーザーにとってもマイナスではないと思いますし、店舗側も告知する事ができますし、使い方によっては双方にメリットがあると言えます。

モーダルウィンドウの設置方法

ではモーダルウィンドウの設置方法を解説していきます。モーダルウィンドウは特に画面サイズが限られているスマホで効果を発揮しやすいと思いますので、今回はスマホでの設置方法を解説します。

CSS読み込み

まずはCSSを読み込ませて下さい。下記コピペでOKです。

※楽天RMSの設置したいページ(TOP・商品ページ共通説明文・カテゴリページ共通説明文)に下記の記述を追加する

HTML

つづいて、HTMLです。
こちらも表示させたいページに記載します。

トップページに設置	トップページ設定 > トップ説明文
商品ページ全てに設置	商品ページ設定 > 商品ページ共通説明文
カテゴリページ全てに設置	カテゴリページ設定 > カテゴリページ共通説明文
指定の商品ページに設置	対象商品 > スマートフォン用商品説明文

「urlを入力」の箇所に飛ばしたいページのリンク、「画像urlを入力」の箇所に作成した任意の画像URLをそれぞれ記載します。

CSS

最期にCSSの記述です。


input#modal {
	display: none;
}
input#modal + label {
	width: 100%;
	height: 120%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2147483646;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
input#modal + label div {
	position: fixed;
	width: 300px; /*画像の横幅*/
	top: 50%;
	left: 50%;
	margin: -217px 0 0 -150px; /*画像の高さと幅の半分 marginをマイナス */
	background: none;
	border: none;
}
input#modal + label div::before {
	content: "× Close";
	position: absolute;
	bottom: -25%;
	right: 50%;
	margin: 0 -60px 0 0;
	font-size: 3em;
	font-weight: bold;
	color: #ffffff;
}
input#modal:checked + label {
	display: none;
}

※表示イメージ

上記のように、クーポン画像を設置して告知してみました。画像をクリックするとクーポンが獲得できる仕様です。