jQuery

【jQuery】シンプル、軽量でカスタマイズ可能なjQueryモーダルModelo

October 29, 2018
Modelo

Modeloは、シンプル、軽量でカスタマイズ可能なjQueryモーダル。

Installation

<!-- Modelo Style -->
<link rel="stylesheet" href="your-folder/modelo.min.css" />

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

<!-- Modelo Script -->
<script src="your-folder/modelo.min.js"></script>

Usage

Basic Setup

<div class="modal" role="dialog" aria-hidden="true" data-modal>
  <div class="modal-content">
    <!-- ... -->
  </div>
</div>

Initialize Modelo

$('#your-id').modelo();

Adding Content

<div class="modal" role="dialog" aria-hidden="true" data-modal>
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">Title of Modal</div>
    </div>
    <div class="modal-body">
      <!-- ... -->
    </div>
    <div class="modal-footer">
    </div>
  </div>
</div>

Opening the Modal

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

Closing the Modal

Using an Icon

<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <button role="button" class="icon-close" aria-label="close-modal" data-modal="close-modal">X</button>
      <h2 class="modal-title">Title of Modal</h2>
    </div>
    <!-- ... -->
  </div>
</div>

Using a Close Button

<div class="modal">
  <div class="modal-content">
    <!-- ... -->  
    <div class="modal-footer">
      <button role="button" class="btn-close" aria-label="close-modal" data-modal="close-modal">Close</button>
    </div>
  </div>
</div>

Putting it All Together

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

<!-- Simple Modal Markup -->
<div class="modal" role="dialog" aria-hidden="true" data-modal>
  <div class="modal-content">
    <div class="modal-header">
      <button role="button" class="icon-close" aria-label="close-modal" data-modal="close-modal">X</button>
      <h2 class="modal-title">Modal Title</h2>
    </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" class="btn-close" aria-label="close-modal" data-modal="close-modal">Close</button>
    </div>
  </div>
</div>

Options

  1. top
  2. maxWidth
  3. centered
  4. fadeDuration

MIT