jQuery modalダイアログについて＆重複時間処理

投稿日：2015年12月1日更新日：2020年5月18日

Contents

1 jqueryモーダルダイアログ
- 1.1 あらかじめ読み込むライブラリ
- 1.2 ソース本体
2 重複時間について

jqueryモーダルダイアログ

今のWEBアプリだとほぼ必須となっているモーダルウィンドウ。

※モーダルウィンドウとは画面中央に小さい画面みたいなものが出現して、操作がおわるまで受け付けない処理のことです。

下の画面を見てもらうのが一番わかりやすいかも・・・

http://drublic.github.io/css-modal/#modal-text

今だいたいどのアプリもダイアログやフォームはこれを使っているものが多いですね。

んで、これjQueryで簡単に実装できるのでそのメモなんかを。

あらかじめ読み込むライブラリ

下記が必要になってくるソースです。

jquery-ui.min.css
jquery本体
jquery-ui.min.js

ソース本体

Html側

非常に簡単で普通のhtmlを書いてあげればOKです。

ここではid=”sample_hoge_id”としておきましょうか。

<div id="sample_hoge_id">
ここにダイアログ上に表示させたいhtmlを書く
</div>

ここにダイアログ上に表示させたいhtmlを書く

</div>

Javascript側

//何らかのトリガーとなるイベント(例えばtrigger_button_idというidがふられたボタンを押す)が発生したときに
//下記の命令を書いてあげればOKです。このときダイアログが開きます。
$("#trigger_button_id").click(function(){
      $("#sample_hoge_id").dialog('open');
});


//モーダルウィンドウ
$('#sample_hoge_id').dialog({
  autoOpen: false,//これをいれておくとhtmlは通常時はみえません。
  title: 'サンプルモーダルウィンドウ',//モーダルウィンドウのタイトル
  modal: true,
  buttons: {//超大切です。ボタンに表示する文字列とその後のイベントです。
	"予約する": function(){
	//何らかの処理
        }
  }
});

//何らかのトリガーとなるイベント(例えばtrigger_button_idというidがふられたボタンを押す)が発生したときに

//下記の命令を書いてあげればOKです。このときダイアログが開きます。

$("#trigger_button_id").click(function(){

$("#sample_hoge_id").dialog('open');

});

//モーダルウィンドウ

$('#sample_hoge_id').dialog({

autoOpen: false,//これをいれておくとhtmlは通常時はみえません。

title: 'サンプルモーダルウィンドウ',//モーダルウィンドウのタイトル

modal: true,

buttons: {//超大切です。ボタンに表示する文字列とその後のイベントです。

"予約する": function(){

//何らかの処理

}

});

上記のように記述するだけでdialogで指定した部分のhtmlは表示されなくなり、トリガーでモーダルウィンドウを起動した時のみ開くようになります。

参考リンク

Dialog

Dialogウィジェットでダイアログ・ボックスを生成するには？

重複時間について

病院の予約システムなんかである時間帯とある時間帯がダブってないかをチェックしたいときですが、こちら普通に考えるとロジックが少々複雑です。(場合分けが面倒くさい・・・)

が、下記リンクで非常にスマートな検索条件を扱っていたんでリスペクトの意味も込めてリンクを貼ります。

なんかこう言った場合分けとかって学生のときにやった数学を思い出すなー。

[CakePHP]時間の重複がないかMySQLデータベースに問い合わせる