プラグインを使わずにjQueryを使って汎用的なモーダルを実装する

プラグインは使わずにjQueryを使ってどのページでも使えるモーダルの実装します。

デモ

See the Pen
modal
by kura (@kuranopen)
on CodePen.

使い方

下記のHTML、CSS、Javascriptを読みこみます。

そのあと、jQueryのクリックイベント内にmodal.open($(this));を加えればOKです。

$(".modal-open").click(function() {
  modal.open($(this));
});

HTML

<a class="modal-open" href="#box">モーダルオープン</a>
<div id="box" class="modal">モーダルです。</div>

CSS

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
}
.modal-content {
  display: none;
  box-sizing: border-box;
  background: #fff;
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}
.modal{
  display: none;
}

Javscript

$(".modal-open").click(function() {
  modal.open($(this));
});

function Modal(el) {
  this.option = {
    modalOverlayClass: "modal-overlay",
    modalContentClass: "modal-content",
  }
}
Modal.prototype = {
  open: function (el) {
    modalObj = this; 
    targetID = el.attr('href'); 
    $target = $(targetID).clone();
    
    //モーダル表示
    $("body").append('<div class="'+this.option.modalOverlayClass+'"></div>');
    $('.'+this.option.modalOverlayClass).append('<div class="'+this.option.modalContentClass+'"></div>').fadeIn(300);
    $('.'+this.option.modalContentClass).append($target).fadeIn(300);
    $target.fadeIn();
    
    //閉じるイベント追加
    $(".modal-overlay").click(function (e) {
      modalObj.close();
    });
  },
  close: function () {
    $(".modal-overlay").remove();
    $(".modal-content").remove();
  }
};
var modal = new Modal();
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。