modal, modalessウィンドウをjQuery UIなしで実装

jQuery UIを使わずにmodalを表示するロジックをメモ書きします。

※modal, modalessウィンドウのサイズやカラーは適当

code

JS

// modal
var modalWindow = (function() {
  return {
    open: function(modal) {
      var $cover = $("div.cover");
      $cover.width($(window).width()).height($(window).height());
      $cover.show();
      modal.css("top", $(window).scrollTop() + 40);
      modal.css("left", $(window).width() / 2 - modal.width() / 2);
      modal.show();
    },
    close: function(modal) {
      $("div.cover").hide();
      modal.hide();
    }
  };
})();

// modeless
var modelessWindow = (function() {
  return {
    open: function(modeless) {
      modeless.addClass("modeless");
      modeless.css("top", $(window).scrollTop() + 40);
      modeless.css("left", $(window).width() / 2 - modeless.width() / 2);
      modeless.show();
    },
    close: function(modeless) {
      modeless.removeClass('modeless');
      modeless.hide();
    }
  };
})();

CSS

/* modal */
body {
  z-index: 1;
}

.cover {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.5;
  background-color: #aaaaaa;
  z-index: 990;
}

.dialog {
  display: none;
  position: absolute;
  /*top: 60px;*/
  z-index: 999;
}

.dialog_contents {
  border-radius: 5px;
  padding: 20px;
  background-color: #ffffff;
}

p.dialog_close_button {
  width: 1em;
}

/* modeless */
.modeless {
  border-radius: 4px;
  background: #3ff;
  box-shadow: 0px 0px 4px #333333;
  line-height: 0px;
}

HTML

overlayが必要です。ここではclass="cover"で実装します。modalもしくはmodelessウィンドウで表示したいコンテンツを書いて下さい。閉じるボタンを実装する場合と合わせて下記の通りに出来ます。

<div class="cover"></div>
<section id="section_id" class="dialog">
  <div class="dialog_contents">
    <p class="dialog_close_button">×</p>
  </div>
  ここにコンテンツ
</section>

使い方

modal用のHTMLを用意してmodalに表示したいコンテンツごとデフォルト非表示、何かしらのアクションを起こした際に表示するロジックをページごとJSで呼んでやればいいです。仮にボタンをクリックして呼び出すと想定して、次のように出来ます。

// open modal window
modalWindow.open($("#~~"));

// open modeless window
modelessWindow.open($("#~~"));

// close modal window
$("p.dialog_close_button").on("click", function() {
  modalWindow.close($("#~~"));
});

基本的に呼び出す側は呼び出し処理を1行で書けるとシンプルで見やすくなります。もしjQuery UIで実装するのであればもっと楽なんですが、あちらはたくさん独自のclassを追加してくれるので後々デザインが面倒になるでしょう。しかしdraggable()を使えばドラッグ可能に出来るしその他便利な機能もついているので中々捨てがたいものはあります。