skillup

技術ブログ

Database JavaScript PHP UI

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

投稿日:2015年12月1日 更新日:

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”としておきましょうか。

Javascript側

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

参考リンク

Dialog

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

重複時間について

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

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

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

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

-Database, JavaScript, PHP, UI
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ob_startを使ったバッファリング出力

先日var_dumpの結果をログに出力したいときに検索すると下記のようなコードを書けばよいということがわかりました。

ob_start …

no image

webpackについて再履修2

以前やったこの記事への追記的な意味で。 webpackについて再履修 Contents1 webpack-cli2 gulp-webpackは非推奨3 devtoolでデバッグ可能 webpack-c …

no image

laravelのmigrationに関して

DBのカラムの保守などをする場合のmigrationに関して。 ポツポツ使っていたのですが、しっかりまとめてなかったのでここでまとめて見ようかと思います。 Contents1 カラム定義2 実際の実行 …

no image

アンチパターン トランザクションスコープ+大量データのリアルタイム集計+接続が詰まる

本日は主にインフラの設計的なことに関して。 Contents1 トランザクションスコープの設定1.1 デメリット1.2 対策2 大量データのリアルタイム集計2.1 デメリット2.2 対策3 詰まると接 …

no image

インデックスについて(SQLServer)

DBのインデックスについて、今までぼんやりと検索条件の効率化についてはしっていたのですが、もう少し掘り下げて理解する必要があるなと思い、メモります。 SQLServerのインデックスについてすごくまと …

アーカイブ