jQuery

【jQuery】軽量、シンプル、カスタマイズ可能なモーダルプラグインSimple Modal

December 10, 2018
Simple Modal

Simple Modalは、軽量、シンプル、カスタマイズ可能なモーダルプラグイン。

Installation

<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Simple Modal -->
<script src="your-folder/simple-modal.min.js"></script>
<link rel="stylesheet" href="your-folder/simple-modal.min.css" />

<!-- Optional Styles -->
<link rel="stylesheet" href="your-folder/simple-modal-default.min.css" />

How to Use

modalクラスとdata-modal属性を追加

<div class="modal" data-modal></div>

モーダルに必要なコンテンツを追加

<div class="modal" data-modal>
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">Modal Title</div>
    </div>
    <div class="modal-body">
      <p>Modal content will go here.</p>
    </div>
    <div class="modal-footer">
      This is the modal footer.
    </div>
  </div>
</div>

Opening the Modal

button要素を作成してdata-modal="open-modal"属性を追加します。

<button role="button" data-modal="open-modal">Open Modal</button>

Closing the Modal

button要素を作成し、data-modal="close-modal"属性を追加します。

<button role="button" data-modal="close-modal">Close Modal</button>
<div class="modal" data-modal>
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">Modal Title</div>
    </div>
    <div class="modal-body">
      <p>Modal content will go here.</p>
    </div>
    <div class="modal-footer">
      <button role="button" data-modal="close-modal">Close Modal</button>
    </div>
  </div>
</div>

Using an Icon

button要素を作成し、data-modal="close-modal"属性を追加し、close-iconクラスを与えます。

<button role="button" class="close-icon" data-modal="close-modal">X</button>
<div class="modal" data-modal>
  <div class="modal-content">
    <button role="button" class="close-icon" data-modal="close-modal">X</button>
    <div class="modal-header">
      <div class="modal-title">Modal Title</div>
    </div>
    <div class="modal-body">
      <p>Modal content will go here.</p>
    </div>
    <div class="modal-footer">
      This is the modal footer.
    </div>
  </div>
</div>

Putting it All Together

<!-- Button to open the modal. -->
<button role="button" data-modal="open-modal">Open Modal</button>

<!-- Simple Modal Markup -->
<div class="modal" data-modal>
  <div class="modal-content">
    <button role="button" class="close-icon" data-modal="close-modal">X</button>
    <div class="modal-header">
      <div class="modal-title">Modal Title</div>
    </div>
    <div class="modal-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="modal-footer">
      <button role="button" data-modal="close-modal">Close</button>
    </div>
  </div>
</div>

MIT