*

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

公開日: : 最終更新日: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

関連記事

おてがる通販

おてがる通販を使いたいが評判やWindows10で使えるのか気になる

「おてがる通販」とは、なつかしいひびきですね。「おてがる通販」はネットショップ専用の受注処理専用

記事を読む

no image

ショップ運営者のメール処理テクニック

ショッピングモールに出店して間もない運営者から「某hoo!さんから、こんなメールが来たのですが、どう

記事を読む

エクセルの表

エクセルで作った表をHTMLページに表示

「エクセル(Openoffice)で作った表をウェブページに移植できる!」と、まぁ~こんなことを今更

記事を読む

クローラー

アプリのアイデアを探す方法

ランサーズ(Lancers)の「仕事の相談」という掲示板のようなコーナーに、よく「こんなアプリを開発

記事を読む

うなる

優れたキャッチコピーにうなる

ランディングページを作る必要があって調べ物をしていたら、すばらしいキャッチコピーに出会ったので紹介し

記事を読む

ヘッダー看板

ヤフーショップのヘッダー画像HTMLの編集方法

開店申請にパスしたなら、とりあえず商品を登録して行くわけですが、ヘッダーを作ってお店らしくしたい人も

記事を読む

たたりなし

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

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

記事を読む

事件簿

ネットショップ運営のかる~い事件簿

長年ネットショップをやていると、いろいろあるのですが、おおむね平和な運営が10年以上続いてい

記事を読む

送料無料

「送料無料」・・・無料なのはお客さんだけ(泣)

おもしろランディング・キーワード「ネットショップ 送料無料の送料はどこが払っているのですか?」。昨日

記事を読む

画像検索

商品写真だけの一覧ページを作りたい

店舗内の商品検索は、品名や品番など「テキスト(文字)検索」が基本。 でも、商品数が多いと、テキ

記事を読む

Adsense

Adsense

常時SSL
がっくりorz…常時SSLを無料で利用できるプラン発見、灯台下暗し

つい2,3日前に、さくらインターネットを使った常時SSLオプションが、

常時SSL化
常時SSL化へ向けてのテスト体験

ホームページビルダーでPC用に作ったサイトが10年経って、レスポンシブ

オモシロ質問
問い合わせに返答したところ、おもしろい返信が!

ネットショップ開業に特化したサイトをやっていると、やはり、それに関連し

やってはいけない
ネットショップ開業でやってはいけないこと

やってはいけないこと。それは、マルチタスク。マルチタスクは言ってみれば

チョコとオズボーン
バレンタイン商戦のブレイクスルーに学ぶ

いよいよ今月の一大イベントのバレンタインデーです。バレンタインと言えば

→もっと見る

PAGE TOP ↑