2015年12月21日月曜日

モーダルウインドウのプラグインを使ってみた

こんにちは山田です。
 今回モーダルウィンドウを実装するにあたって プラグインを使用したのでその覚書です。

 ■そもそも、モーダルウィンドウとは
何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計
 (https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6)

モーダルウィンドウでググると、かなりたくさんプラグインが出ていることがわかりました。
びっくりです。
その中でも一番簡単にできそうなものをチョイスしてみました。

■使用したプラグイン 今回使ったプラグインはこちら
http://zurb.com/playground/reveal-modal-plugin

■3分でわかるモーダルウィンドウ組み込みの流れ

①上記のURLからファイル一式をダウンロードし、目的のディレクトリに配置
②ヘッダー部分にjsの読込を追加


④HTMLに、下記のようなフォーマットで記述する
クリックしてみてください





以上

Related Posts:

  • 「datepicker」を日本語化するこんにちわ、開発者のⅠです。 前回紹介したdatepickerについて、各表記をデフォルトの”英語”から”日本語”に変更してみたいと思います。 それでは、datepickerの各プロパティに対して表示させたいもの(日本語)を設定してあげましょう。 /* 日本語化してみよう */ jQue… Read More
  • CSSのDisplayプロパティこんにちは山田です。 JSの制御で、 データがない時は、丸ごと消しときたい時ってありますよね その時の実装例です。 件数件 $(function() { $('button').click(function(){ $('div').css('display', … Read More
  • jQuery UI の「datepicker」とは?こんにちわ、開発者のⅠです。 今回は、datepickerについてお話したいと思います。 このdatepickerは、カレンダーを表示させて日付を選択させるUIを実現するために用いるjQuery(Javascriptのライブラリ)の一つです。 まず利用するためには、j Query 本体を読み込む… Read More
  • DOM読み込み時に動作させる $(document).readyこんにちは山田です。 DOMという言葉を最近知りました。 ■DOMとは :XMLやHTMLで記述された文書をプログラムやスクリプトから参照あるいは操作するための方法を提供する仕組み(出典|ASCII.jpデジタル用語辞典) というわけで DOMの読み込み完了時のみに処理をいれたい時に使う関数の… Read More
  • モーダルウインドウのプラグインを使ってみたこんにちは山田です。  今回モーダルウィンドウを実装するにあたって プラグインを使用したのでその覚書です。  ■そもそも、モーダルウィンドウとは 何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタ… Read More

0 コメント:

コメントを投稿