*

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

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

この記事は約4分で読むことができます。

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

関連記事

コーディング

コーディングという仕事

気がつけば、世の中では「ウェブページ作成」のことが「コーディング」と言われるようになっているらしい。

記事を読む

フルスクラッチ

素人の手出し危険「ECサイトのフルスクラッチ」

ECサイトのフルスクラッチ。 別の言い方をすると、ネットショップの完全オーダーメイド制作で

記事を読む

アンダードッグ効果

アンダードッグ効果にやられる人は多い

別名「負け犬効果」 スポーツの試合などで、劣勢にあるチームをつい応援したくなる、あの心理です。

記事を読む

売れない対策

「ショップサーブ売れない」と嘆く前にやるべき3つの対策

ショップサーブは、本格的なネットショッピングサイトを作るには優れたツールだと思います。いろいろな機能

記事を読む

オプション

1商品にオプション10個まで設定可能

ある商品を購入するときに、カートボタンの上に「カラー」や「サイズ」を選べるやつ(プルダウン)がついて

記事を読む

良さそうに思える言葉

古いお客さん用メール内検索の想定も必要

ある商品を5年ぶりくらいに購入しました。その商品でなければいけないわけではないのですが、すでにある商

記事を読む

生き延びる裏ワザ

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

ネットショップでは、メーカー品をメーカーから仕入れて販売しているわけですが、新商品の案内が来たと思え

記事を読む

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

人材

採用したい人材採用してはいけない人材

採用って難しいですよね。考えれば考えるほど難しくなる・・・ ズバリ採用したくない人はこのタイプ

記事を読む

タイミング

「ビジネスはタイミングが大事」で失敗した例

商売は「早すぎてもダメ。遅すぎてもダメ。タイミングが大事。」なんて言います。まさに、それを象徴するよ

記事を読む

Adsense

Adsense

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

リファラル採用
ECサイトのパート・アルバイト採用は低コストなリファラル採用

リファラル採用(Refarral recruitment)とい

送料を安くする
灯台下暗し!?送料を普通に安くする方法

個人事業主として契約して以来、「安いから」という理由で使い続けてい

→もっと見る

PAGE TOP ↑