*

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

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

関連記事

クレーマー対処法

クレーマー対処法マニュアルを知るには自らクレーマーになること

いざクレームが発生すると、どうして良いかわからないものです。そこで、まじめに、お客様の苦情に対処

記事を読む

iPhoneのChromeでスマホサイトへリダイレクトされない

ショップサーブで出しているお店のスマホページのURLを直接コピペして開こうとすると、なぜかPCページ

記事を読む

ヤフートップ

yahoo! shoppingのトップページはどうやって作るのですか?

無料で、しかも、地方の父ちゃん母ちゃんでも出店できてしまうyahoo! shopping。ライト出店

記事を読む

自動引落

クレジットカードの継続課金、自動引き落としについて調べ中

お客さんに定期的に買って欲しい新商品をがあって、それを、「カードで毎月引き落としするあれでやってみる

記事を読む

受注管理ノウハウ

ネット通販受注管理ノウハウ

ネット通販の受注管理スタイルは大きく分けて3タイプあります。 (1) レンタルネットショップの

記事を読む

管理画面比較

ネットショップ開店サービス4社の管理画面比較

ネットショップを始める場合、ASPと呼ばれるネット通販システムを貸し出す業者を利用するのが一般的にな

記事を読む

SSL

フォームメールCGIを設置しよう

取扱商品が数千点、数万点となってくると、ショップサーブの問い合せフォームでは正直、間に合わないんです

記事を読む

no image

銀行に関して不思議なことが2つ

毎月25日に見る銀行ATMコーナーでの行列。 1つ目の不思議です。 もちろん、どういった

記事を読む

開業7

ネット販売開始時に押さえておきたい7つのツールやサービス

ネット販売業は自営業というよりは自由業に近いですね。小説家や漫画家、脚本家や翻訳家など、時間的場所的

記事を読む

オリジナルページ

ショップサーブのテンプレートを使わずにオリジナルページを使う方法

ショップサーブは、オリジナルページを使えるところが、他社と違うところですね。「ショップサーブのテンプ

記事を読む

Adsense

Adsense

アプリスキル
アプリ開発の技術くれ

S-chop(スコップ)というアプリをご存知でしょうか。 『スマ

呪縛からの開放
無料当たり前という固定観念の呪縛かの開放

ネットショップを開業している人にとっては、当たり前のASP(通販システ

グランプリ受賞
ネットショップ大賞2016グランプリ受賞を逃す

すみません。別にノミネートされていたわけでも、声がかかったわけでも

仕事にやる気は必要か
「仕事にやる気って必要ですか?」って相談と回答を読んでみた

読売ONLINEの発言小町のとあるトピックにヒット。 「仕事

生き延びる裏ワザ
メーカーが生き残るために裏ワザ的に使える便利なWEBサービス

ネットショップでは、メーカー品をメーカーから仕入れて販売しているわけで

→もっと見る

PAGE TOP ↑