tique

【モーダルウィンドウ】楽天市場でポップアップでお知らせを表示する。

楽天市場

下記の制作会社さんが紹介しているCSSだけで利用できる便利なモーダルウィンドウ設置方法。

iframeを表示することで更新も簡単にできるようにしてみました。アプリにも同時表示します。

楽天市場 CSSだけで可能！スマホに設置できるモーダルウィンドウ

手順

①上記の記事のCSSを読み込ませます。

②iframeで表示するページを作成します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>モーダルウィンドウ内表示画像</title>

<style type="text/css">
@media screen and (max-width:300px) { 
div {display:flex; flex-wrap:wrap;}
div p {width:48%; margin:1%;}
div p img {width:100%;}
}

@media screen and (min-width:301px) { 
div {display:flex;}
div p {margin:1%;}
div p img {width:100%;}
}

</style>
</head>

<body>
<div>
<p><a href="画像のリンク先" target="_top"><img src="画像url"></a></p>
<p><a href="画像のリンク先" target="_top"><img src="画像url"></a></p>
<p><a href="画像のリンク先" target="_top"><img src="画像url"></a></p>
<p><a href="画像のリンク先" target="_top"><img src="画像url"></a></p>
</div>
</body>
</html>

 

③表示したいところに下記のように記述します。

▽モーダルウィンドウで表示する場合

<input type="checkbox" name="modal" id="modal"  ="" ="" />
<label for="modal" ="">
<div ="">
<font color="#000"><iframe src="表示したいiframeのURLを挿入" height="245px"  scrolling="no" frameborder="0"　　　></iframe <!--　　　-->></font>
</div ="">
</label ="">

 

 

▽商品ページなど横並びで表示する場合（スマートフォン用商品説明文などはこちらがおススメ）

<iframe ="" src="https://www.rakuten.ne.jp/gold/kawanotajimaya/iframe/modal.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe ="">

 

モーダルウィンドウの場合は2列に折り返して表示されます。

@media screenで切り替えているだけなので管理や更新も簡単です。

高さや横幅などは画像サイズ等で変わると思いますので微調整されてください。

広告