Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
demo
js
CHANGELOG.md
README.md
bower.json

README.md

bootstrap-modal-sheet

Bootstrap modal sheets are a kind of modals inspired by OS X sheets and are an alternative to the usual Twitter Bootstrap modals.

Boostrap modal sheet screenshot

They have several advantages:

  • They are not intrusive (usually smaller, and hiding a smaller part)
  • They have a scope: user interaction is required in the current area rather than the whole web page.
  • They have a context. They appear from a chosen header

Demo

A demo has been set up at this address: http://demo.michaelperrin.fr/bootstrap-modal-sheet/demo/index.html

This shows a table with 2 modal sheet dialogs attached to it:

  • one for adding a row to the table
  • one that shows an information text.

Install

Bower

bower install bootstrap-modal-sheet

Download

https://github.com/michaelperrin/bootstrap-modal-sheet/archive/v1.0.0.tar.gz

Usage example

Include CSS:

<script src="lib/boostrap-sheet/js/bootstrap-sheet.js" type="text/javascript"></script>

Include JS:

<link href="lib/boostrap-sheet/css/bootstrap-sheet.css" type="text/css" rel="stylesheet">

Create an info box from which a modal sheet will appear when clicking on the "Show info" button:

<div id="info-box">
    ...
</div>

<a data-toggle="sheet" href="#mySheet">Show info</a>

<div class="sheet slide" id="mySheet" data-sheet-parent="#info-box">
    <div class="sheet-content">
        <div class="sheet-body">
            <p>
                I'm an information modal sheet.
            </p>
        </div>

        <div class="sheet-footer">
            <a href="#" class="btn btn-default" data-dismiss="sheet" aria-hidden="true">Cancel</a>
        </div>
    </div>
</div>

Methods

.sheet('show')

Manually opens a modal sheet.

Example:

$('#myModal').sheet('show');

.sheet('hide')

Manually closes a modal sheet.

Example:

$('#myModal').sheet('hide');

Events

Events of the standard Bootstrap modal are available as well for modal sheets (see http://getbootstrap.com/javascript/#modals-events):

  • show.bs.sheet: Fired immediately when the show instance method is called.
  • shown.bs.sheet: (IE10+ and all other browsers) Fired when the modal sheet has been made visible to the user.
  • hide.bs.sheet: Fired immediately when the hide instance method has been called.
  • hidden.bs.sheet: Fired when the modal has finished being hidden from the user.