*当サイトのリンクにはAmazonアソシエイトやアフィリエイトリンクが含まれております。

オリジナルのモーダルウィンドウを作りました

今回はショッピングページのウェブネタです。
個人的に頑張って書いたプログラムを実装させましたので一応書いておこうと思いまして…。

広告

オリジナルのモーダルウィンドウになりました

つい最近も変更したショッピングページですが、本日自作のプログラムでモーダルウィンドウを実装させました。

モーダルウィンドウとは

モーダルウィンドウって何??って思う方もいらっしゃると思いますが、画像をクリック、タッチした時に現れるポップアップウィンドウみたいな物です。このページもモーダルウィンドウを使っていますので、大体の雰囲気は分かると思います。
少し前はやはり半自作、つい先日まではオープンソースを利用していたのですが、やっぱり自分の理想の物が欲しい!!と言う事で、自作してしまったワケです。
ちなみに、このブログのモーダルウィンドウはwordpressのプラグインなので自作ではありません。

一応簡単な説明

現在のショッピングページのモーダルウィンドウは、画像を拡大したトコロから、左上のアイコンをクリックすれば更に拡大します。最大拡大時に一部スマートフォン等で自動で画像の大きさが戻ってしまう事があるのですが、致命的な挙動では無い事と、何故その挙動が出るのか分からないのでとりあえず放置です。自作の愛嬌だと思って下さい(苦笑)

スマートフォンのスワイプにも対応させようか悩んだのですが、プログラムが激しく複雑になる感じでしたのでスワイプ動作には対応していません。

しかしながら、拡大から更に拡大のアクション付きのモーダルウィンドウが少ないので、ナカナカ面白く出来たと思います。

ではでは


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください