MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」

【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」

公開日:2017年06月19日
最終更新日:2019年07月18日
オンスタ運営
プログラミング
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > 【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
このエントリーをはてなブックマークに追加
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
【PR】jQueryのオンライン講座をUdemyで探す お久しぶりです! GORILLA-Yです! 今回はjQueryのプラグインでよさげな モーダルウィンドウプラグイン「iziModal」をご紹介。 オシャレなエフェクトがいい感じです! レスポンシブも対応ということでこいつぁ使ってみないとね! ライセンスは2017年5月時点でApache2.0。 制作会社にとっては嬉しい限りですね(^ ^) では早速使ってみましょー!  

iziModalのファイルを入手

まずはiziModalを動作させるため、必要なファイルを入手しましょう。 必要なファイルは本体ファイルのjsと、 cssファイル。あとはプラグインを動作させるためのjQuery本体です。 iziModal本体は公式サイト/GitHubを参照すると npmやbowerなどのパッケージマネージャーで配布していたり、 CDNにもファイルを置いているようですのでまずは確認してみましょう。

iziModal

公式サイト http://izimodal.marcelodolce.com/ GitHub http://izimodal.marcelodolce.com/ CDN https://cdnjs.com/libraries/izimodal githubや公式サイトからダウンロードするもよし、パッケージマネージャーから インストールするもよし。お好きなところから入手しましょう。 僕はパッケージマネージャーのbowerを使ってるので、 今回はbowerを使ってインストールします。
bower install izimodal
jQueryもパッケージマネージャーをお使いでしたら一緒に導入してしまいましょう。
bower install jquery
jQueryは以下公式サイトからも直接ダウンロードできます。 手っ取り早く!って場合は以下からどうぞお使いください。 jQuery https://jquery.com/  

iziModalを設置して読み込ませる

次に上記で入手したファイルを読み込ませましょう。 お好きな名前のhtmlファイルに以下を記述してください。 必要なのは上記ファイルのみ3ファイルのみです。圧縮されたminifyファイルもあります。 ファイルを見ると45kbのファイルが圧縮されて24kbまで落ちています。 軽快で良いですね(^ ^) JavaScriptファイルはなるべくbodyタグの終了タグ近くへ cssファイルはhead内に記述しましょう。  

実際に使ってみる

さて、ここまででiziModalを使う準備は完了です。 ではいざ動かしてみましょう。

基本の使い方

「.trigger-defaultというclass名のついたセレクタがクリックされたら、id名がmodalとついているものを開け」という感じですね。 これでモーダルウィンドウ自体は実装できるので、カスタムしたい方はオフィシャルサイトを読みながら、進めていくと良いと思います。 デモは以下をご確認ください。

See the Pen iziModal.js テスト デフォルト by yamadante (@yamadante) on CodePen.

iframe

youtubeなどのiframe形式のものも対応しています。 上記でも問題ないのですが、画面いっぱいにでてしまってモーダルウィンドウ感がでませんね。 ていうか他のテキストどこいった。。。 なのでhtmlをdata属性を使った記述に変更し、scriptにオプションを足して モーダルウィンドウとして表示してあげましょう。 iframeの動画がモーダルウィンドで表示されるかと思います。 data属性を使った記述は他にもいっぱいありますのでぜひ試してみてくださいね デモは以下

メッセージアラート

このプラグインで個人的にイチオシなのがこちらのアラート機能。 表示後、何秒後に消えるなど、プログレスバーの表示が嬉しいですね。 「データの送信に成功しましたー」とか「失敗しました〜」なんて 文字通りメッセージ表示で重宝しそうですね!

See the Pen jwByJO by yamadante (@yamadante) on CodePen.

いかがでしたか? 画面の感じもいい感じですし、 パパっとモーダルウィンドウを実装したいときなどに、 重宝しそうです! デモはcodepen上で動かしていますが、なぜかcodepen上ですと、 中央寄せが失敗するのでcssで軽く調整しています(^ ^;) 以上、現場からでした〜 【PR】jQueryのオンライン講座をUdemyで探す
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
オンライン学習
プログラミング
公開日: 2019年06月25日
最終更新日: 2019年07月11日
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
  • # HTML5プロフェッショナル認定資格
オンスタ運営
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2019年10月31日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営
[JavaScript_中級者への道]  プロトタイプについて – [2] クラスを定義して呼び出す
プログラミング
公開日: 2020年02月18日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [2] クラスを定義して呼び出す
  • # ES6
  • # JavaScript
  • # クラス
  • # プロトタイプ
オンスタ運営
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2019年11月07日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営
[JavaScript_中級者への道] プロトタイプについて – [1] 概要
プログラミング
公開日: 2020年02月18日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [1] 概要
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2019年09月03日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
プログラミング
公開日: 2020年02月19日
最終更新日: 2020年02月19日
[JavaScript_中級者への道] プロトタイプについて – [3] 身近な機能を実装してみる
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。