プラグインを使わずに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();

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選