MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

公開日:2017年06月19日
最終更新日:2019年07月18日
オンスタ運営
プログラミング
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > 【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
このエントリーをはてなブックマークに追加
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
【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で探す

関連コンテンツ

【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2019年09月03日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
Webデザイン
プログラミング
公開日: 2017年07月17日
最終更新日: 2019年05月28日
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
オンスタ運営
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
プログラミング
公開日: 2019年08月04日
最終更新日: 2019年08月01日
Scratchなら遊び感覚で学べる!サービスの特徴やメリットをピックアップ
  • # Scratch
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
PHPエンジニアが取得したい資格!PHP技術者認定試験とは?
オンライン学習
プログラミング
公開日: 2019年06月14日
最終更新日: 2019年06月18日
PHPエンジニアが取得したい資格!PHP技術者認定試験とは?
  • # PHP技術者認定試験
  • # pickup
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
オンライン学習
プログラミング
公開日: 2019年06月25日
最終更新日: 2019年07月11日
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
  • # HTML5プロフェッショナル認定資格
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
全記事一覧

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

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

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

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