*

ページの移動なしその場で子ウィンドウを表示できる「モーダルウィンドウ」

公開日: : 最終更新日:2017/07/31 CSSやHTML、CGI, ウェブ・テクニック, ネットショップ運営

modalは英語で「形式上の」「形態上の」という意味ですが、modal window(モーダルウィンドウ)はこのアニメーションのようにページ上にふわっと現れるミニウィンドウのことです。クリックで表示させてクリックか、子ウィンドウ以外のスペースをクリックすることで消すことができます。

モーダルウィンドウ

まぁ~、こんな面倒なテクニックを使うネットショップはごく少数派でしょうね。モーダルウィンドウのメリットは、ページを移動すること無くその場でメルマガに登録できたり、商品画像をその場で拡大できたり、とサイトの使いがって(ユーザビリティー)が向上する点です。

導入方法を解説するページを作ろうと思ったのですが、あまりに面倒なんでやめました。

ので、ポイントだけ書いておきます。

1.お好きなモーダルウィンドウを拝借する

2.<HEAD>内でjqueryを読み込む
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

3.<HEAD>内でモーダルウィンドウプラグインを読み込む
<script src=”js/modalwindow.js”></script>
(配布のプログラムによってURLやファイル名は異なる)

4.リンクを作成
リンクは画像でもテキストでも可。

5.モーダルウィンドウに書くコンテンツを作る

こんな感じです。

上記のアニメのモーダルウィンドウは、別ページを呼び出しているのではなく、同一ページ内にコンテンツを書いています。

ページを開いたときは表示されません。CSSで「display:none」を使用しています。そして、リンクがクリックされたときに、ポップアップで出てくる感じです。

おもしろいのがリンク形式です。

通常のリンクは<a href=”http://~”>ですが、<a data-taget=”id***”>というふうに、<div>にIDをふって、そのボックス内を呼び出す形です。こんなリンク方式は初めて見ました。

いずれにせよ、jQueryやJava Scriptを扱うのでやや中級のノウハウになりそうです。CSSは見ればわかるんですが、Java Scriptはやっぱ難しいですね。

ちなみに、jQueryやJava Scriptはショップサーブでも使えます。

ただし、CSSがPCS用とスマホ用で分かれているので2箇所にCSSを記入する必要があります。jQueryはJSはそれぞれ一行でOKです。

Makeshop(メイクショップ)カラー・ミーショップ・プロでは確認していませんが、おそらく大丈夫だと思います。ヤフーショッピングはオプションのトリプルに申込めば利用できます。

参考リンク

モーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順




Adsense

関連記事

自社内で

自社内でネットショップを立ち上げた場合の運用コストについて

自社内で通販事業部を立ち上げる場合の運用コストについて。 すでに製品があるものとして考えた

記事を読む

領収書PDF

領収書はPDFファイルでダウンロードしてもらう

楽天で日用品をお買い物。カートの最後のステップで領収書を希望に(○)をしたら、後日「PDFでダウンロ

記事を読む

撮影機材

ネットショップ用撮影機材は何が良い?

撮影機材を語る前に、まずはカメラです。いい写真を撮ろうと思えば、いいカメラはマストです。いわゆる

記事を読む

フリーマーケット

着なくなったTシャツはリアル販売で

着なくなったTシャツですが、まず思い浮かぶのはヤフオク出品。でも、ノーブランドのTシャツは値がつかな

記事を読む

SSL引っ越し注意

共用SSLの使い方にちょっと注意

個人情報などを送信するページはSSL(暗号化通信)を使うのが常識。でも、独自SSLを買うのはもったい

記事を読む

IT関係得意

周りの人よりパソコン得意だから頼られる。うざい。

こんな実話がありました。 Aさん「俺さ~ん、スマホが壊れちゃってさ、データ復旧できないかな?」

記事を読む

在庫ない

在庫のない商品を販売するネットショップ

通販ショップで、すぐに欲しい商品を注文したら「品切れ」って。 困った・・・ 消費者として

記事を読む

ポータルサイト運営

実は、ネットショップよりおいしいポータルサイト運営

ポータルサイトとは、もともとはYahoo! JAPANのように、ショッピングや地図、天気などの色

記事を読む

たたりなし

CMS・・触らぬ神に祟りなし

「触らぬ神に祟(たたり)なし」とは、『かかわり合いさえしなければ、余計な災いを受けることもない。』の

記事を読む

重ねるCSS

商品写真の上に文字や画像を重ねるCSS

初めての沖縄旅行にテンション上がりまくりの女の子ちゃん 商品写真に文字を入れる場合、基

記事を読む

Adsense

Adsense

初めてのメルカリ
初めてのメルカリショッピングで

ネットショップ運営者とは言え、C業界人ですからね。EC業界のことは広く

ハッシュタグとは
ハッシュダグとは

SNSが盛んになっているにもかかわらず、あまり活用していないのもあって

メルカリ3
メルカリ初心者が学んだ3つのこと

たまに使うメルカリについて学んだことが3つあったので記録しておきます。

商材見っけ
トップセラーで商材見っけ!

仕入れ0.01掛けから7掛けまでの商売をしていると、それ以下の掛け率の

no image
スマホだけでネットショップ運営

「当日は、このメールをプリントしてお持ち下さい。」なんてありますよね。

→もっと見る

PAGE TOP ↑