*

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

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

関連記事

ポータルサイト運営

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

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

記事を読む

上司アホ

優秀な社員やスタッフが辞める理由の90%は上司がアホってw

ある記事を読んで「なるほど!確かに!」と気付かされたのが、「優秀な社員が辞める理由は上司がAHO」で

記事を読む

信頼できる情報源

信頼できる情報ソースを集めよう

どんな情報でも引き出せるネットですが、ショップ運営者が情報扱うためには、それなりに慎重になりたいと思

記事を読む

学んだこと

レスポンシブ・デザインへの移行に際し学んだこと(その2)

もうやり始めると止まらない(><)。HTML5とCSS3?レスポンシブWEBデザインをち

記事を読む

no image

回転寿しレーンから寿司が消える(問屋の生きる道?)

16時頃に回転寿しチェーンに入ったところ、全く寿司が回っておらず、びっくりしました。うそです。びっく

記事を読む

no image

ショップサーブのサイトがリニューアル

ショップサーブのサイトがリニューアルされました。 (管理画面も早くニューアルしてくれ。)

記事を読む

ttrinity

オリジナルTシャツをネット販売する方法(T-Shirts Trinity×通販アプリ)

毎年Tシャツを買い換えるのが楽しみですね。「今年来たTシャツは来年は着ない。」「捨てる。」と言う人も

記事を読む

メルカリより「ヤフオクのほうがダンゼン熱い」場合が多いかも。

「出品するとすぐ売れる」メルカリが気持ち良くて、不要品が出ると、たまに出品していました。

記事を読む

商材見っけ

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

仕入れ0.01掛けから7掛けまでの商売をしていると、それ以下の掛け率の仕入れって眼中に入りません。正

記事を読む

no image

オリジナルプリントを入れたダンボールや宅配袋の効果

昔々、それは、まだショッピングカートCGIなどを使っていた時代に、佐川のドライバー君が近所でネット販

記事を読む

Adsense

Adsense

サポートの品質
サポートの品質で企業の正体がバレてしまう。

ネットショップ1店舗の引っ越し先として検討していた某社。気にな

簡単に取れて稼げる資格
簡単に取れて稼げる資格

税理士の資格を取れば税理士として商売ができるけど独学では難しい

固定費0円
クレジット決済手数料が安い・固定費が無料や安いサービス5選

あっちこっちにネットショップを作っていると大変です。ある通販サ

5つの鉄則
ネットショップ成功の秘訣5つの鉄則

ビジネスとはあまり関連のない教育ジャンルで、とてもいい記事があ

スマホ対応レスポンシブ化
コーポレートサイト(会社ホームページ)のレスポンシブWEBデザイン化で儲ける方法

今ではほとんどの企業やお店がウェブサイトを持っているのは周知の

→もっと見る

PAGE TOP ↑