• 楽天
  • Yahoo!

【RMS対応】CSS/HTMLだけで実現できる!モーダルウインドウでコンテンツを表示しよう!

s%e5%ae%9a-1

最近の出前事情を調べたら「ケバブ」も出前で頼めることを知って
ワクワクしているogaRia佐藤です。
何でも宅配の時代、家から出なくなりますね笑

ページ遷移しないで分かりやすく表現できる今風の表示方法、
「モーダルウインドウ」表示。

RMSにも設置可能なモーダルウインドウでコンテンツを表示できる方法を
ご紹介したいと思います!

モーダルウインドウって何?って方もまずはデモから見てみましょう!

デモ

今回は楽天の買い物カゴ下に注意書きや回遊性UPを
試みたボタンを2つならべてみました。

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-1

メール便注意事項はこちら
売れ筋ランキングはこちら

① 専用CSSを貼り付け

CSSの調整は特にありません。
そのままRMSのヘッダー等の共通部分に貼り付けましょう。

<style type="text/css">
<!--
.modal-wrap{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
}
.modal-wrap .modal-overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: fixed;
	background: #000;
	opacity: 0.5;
	z-index: 2147483650;
}
.modal-wrap .modal-countent {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 2147483651;
	margin:auto;
	padding:12px;
	display: block;
	background: #fff;
	text-align:center;
}
.modal-wrap .close-icon{
	position:absolute;
	top:8px;
	right:8px;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	color:#777;
}
.modal-wrap .close-btn{
	position:absolute;
	bottom:8px;
	left:0;
	right:0;
	text-decoration:none;
	font-size:12px;
	display:block;
	padding:2px 0;
	margin:0 auto;
	width:100px;
	background:#777;
	color:#FFF;
	border-radius:4px;
	text-align:center;
}
.modal-wrap:target {
	display:block;
}
-->
</style>

② 専用HTMLを貼り付け

このHTMLについては共通部分に設置する事ができませんので
各ページごとに貼り付ける必要があります。

ここではRMS商品ページのPC用商品説明文に貼り付けます。

赤字で書かれている関連IDをすべて同じにします。
複数内容の違うモーダルを表示させたい場合は
同じ物をコピーしてmodal02のように関連IDを分けます。

青字で書かれている部分には
設置する商品ページのURLを指定します。
楽天のページだとこの指定がどうしても必要になります。

オレンジで書かれている部分には
モーダルを開くリンク文言になります。
お好みでボタンみたいな画像を使ってもよいと思います。

モーダルを開くリンク


<a href="設置するページのURL#modal01" id="close_modal01">モーダルウィンドウ表示</a>

リンクはRMS商品ページのPC用商品説明文の表示させたい場所に
貼り付けます。

モーダル本体


<div id="modal01" class="modal-wrap">
	<a href="設置するページのURL#close_modal01" class="modal-overlay"></a>
	<div class="modal-countent" style="width:500px;height:400px;">
		<a href="設置するページのURL#close_modal01" class="close-icon">×</a>


			ここに表示させたいHTMLを記述


		<a href="設置するページのURL#close_modal01" class="close-btn">閉じる</a>
	</div>
</div>

モーダル本体はRMS商品ページのPC用商品説明文の一番上か、一番下に
何もタグで囲まれていない部分へ貼り付けてください。

注意

・古いバージョンのIEでは作動しません。
・モーダルを開いた時、一旦ページが最上部に移動します。
・モーダルを閉じると若干開いた位置からずれることがあります。
・クリックするとURLにアンカーが埋め込まれます。
・モーダル用のアンカーが付いたままアクセスするとモーダルが表示された状態でページが開かれます。

CSSのみでモーダルウインドウは若干癖のある仕様になりますが
アンカーが付いたままでアクセスするとモーダルが表示された状態で
ページが開かれますのでうまく使えば面白そうですね!

是非お試しくださいませー^^

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。