Skip to content

Latest commit

 

History

History
79 lines (52 loc) · 1.49 KB

readme.markdown

File metadata and controls

79 lines (52 loc) · 1.49 KB
Raw

Baze Modal

a jQuery plugin to create simple, accessible and mobile friendly modal dialog.

Getting Started

Install via bower

bower install baze-modal --save

Usage

Include Baze-Modal's CSS and Javascript files along with jQuery.

<link rel="stylesheet" href="path/to/baze.modal.css">
.
<script src="path/to/jquery.js"></script>
<script src="path/to/baze.modal.js"></script>

Set up the markup

<button data-target="#[MODAL_ID]">...</button>

<div class="bzm-content" id="[MODAL_ID]" data-title="[MODAL_TITLE]">
    <!-- MODAL CONTENT -->
</div>

then, init baze-modal

$('button').bazeModal();

Example

<button id="modalTrigger" data-target="#myModal">Open Modal</button>

<div class="bzm-content" id="myModal" data-title="Hello Modal">
    <p>You look awesome today!</p>
</div>
$('#modalTrigger').bazeModal();

Options

Option Type Default Description
closeOnOverlayClick boolean true close modal by clicking the dialog's overlay
onOpen function null callback after dialog is opened
onClose function null callback after dialog is closed

Destroy Baze Modal

Trigger the bazemodal.destroy event to destroy Baze Modal

$('#modalTrigger').trigger('bazemodal.destroy');

Browser support

Baze Modal support all evergreen browsers and IE8+ with graceful degradation.

Todo

  • IE8 Support
  • Image Gallery Support