Adaptive Modal is a jQuery plugin to display multiple modal windows.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
jquery.adaptiveModal.js

README.md

ADAPTIVE PLUGIN README

Information

Description

Adaptive Modal is a jQuery plugin to display multiple modal windows.

Author

Pierre Urban

Version

0.0.1

License

Free to use under the MIT license, see LICENSE file.

Usage

JS

$('a[data-adaptive-modal-id]').adaptiveModal();

HTML

<a href="#" data-adaptive-modal-id="myFirstModal">First modal</a>
<a href="#" data-adaptive-modal-id="mySecondModal">Second modal</a>
<div class="adaptive-modal" data-adaptive-modal-id="myFirstModal">
  Hello World! <a href="#" class="adaptive-modal-close">Close the modal</a>
</div>
<div class="adaptive-modal" data-adaptive-modal-id="mySecondModal">
  Peace off! <a href="#" class="adaptive-modal-close">Close the modal</a>
</div>

CSS

.adaptive-modal {
  display: none;
}
#adaptive-modal-overlay {
  z-index: 42001;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}
#adaptive-modal-window {
  z-index: 42002;
  position: absolute;
  border: 1px solid #333;
  background-color: #fff;
  width: 750px;
  padding: 0 0 0 0;
  top: 150px;
  left: 50%;
  margin-left: -375px;
  display: none;
  -moz-box-shadow: 2px 2px 15px #000000;
  -webkit-box-shadow: 2px 2px 15px #000000;
  box-shadow: 2px 2px 15px #000000;
  filter: "progid: DXImageTransform.Microsoft.Shadow(strength = 2, direction = 135, color = '#000000')";
  -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(strength = 2, Direction = 135, Color = '#000000')";
}
#adaptive-modal-content {
  margin: 10px;
  font-size: 16px;
  font-family: Arial;
}

Options

You can customize Adaptive Modal with some options:

  • name: the prefix use which defines name-overlay (the overlay), name-window (the modal), name-content (the modal's content), name-close (class to bind a click event to close the modal)
  • duration: the number of milliseconds before hiding the modal
  • opacity: the overlay opacity

Example

$('a[data-my-specific-name-id]').adaptiveModal({
  name : 'my-specific-name',
  duration : 1000,
  opacity: 0.5
});