bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScript6種類のモーダルウィンドウを実装できる「popModal」JavaScript2016.10.76種類のモーダルウィンドウを実装できる「popModal」popModalは6種類のモーダルウィンドウを実装することができるjQueryプラグインです。単一の表示方法ではなく、複数のパターンから自分好みの表示方法をチョイスできるのがいいですね。いろんなサイトに対応できるモーダルウィンドウを探している人にオススメです。popModal以下はpopModalの実際のデモになります。デモ上部に並んでいる6つのメニューから、各タイプのモーダルウィンドウの動作を確認できます。6つのタイプは以下のとおりです。popModalnotifyModalhintModaldialogModaltitleModalconfirmModalpopModalはボタンをクリックするとその下に表示されます。notifyModalは通知タイプのモーダルウィンドウです。表示されてから一定の時間が経つと消えていきます。hintModalはマウスオーバーすると表示されるタイプです。dialogModalは背景にオーバーレイがかかるLightboxのようなモーダルウィンドウになります。デモではdialogModalのモーダルウィンドウを表示させると、右上に矢印が表示され、ここからコンテンツの前後移動ができる仕組みになっています。titleModalはマウスオーバーで要素のtitle属性に指定したテキストを表示させることが可能です。confirmModalは、背景にオーバーレイがかかり、上からモーダルウィンドウが降りてくるタイプになります。このように、popModalではさまざまなタイプのモーダルウィンドウを実装することができます。1種類だけの表示方法ではもの足りないという人は、ぜひpopModalを活用してみてはいかがでしょうか。詳しい使い方やダウンロードは以下からどうぞ。Chartsは、シンプルでモダンなSVGチャート(グラフ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。