Sandbox: JavaScript

Examples

See the Bootstrap docs for a static example of this (i.e. one that doesn't actually pop up). You can use Bootstrap.Popup to manually controll these or use the Behavior implementation displayed here.

Less Component Required

Be sure to include components/popup.less in your build.

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal
<!-- sample modal content -->
<div data-behavior="BS.Popup" id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
      </div>
      <div class="modal-body">
        <h4>Text in a modal</h4>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

        <h4>Popover in a modal</h4>
        <p>This <a role="button" class="btn btn-default popover-test" title="A Title" data-behavior="BS.Popover" data-bs-popover-options="
            'content': 'And here\'s some amazing content. It\'s very engaging. right?',
            'trigger': 'click'
          ">button</a> should trigger a popover on click.</p>

        <h4>Tooltips in a modal</h4>
        <p><a href="#" class="tooltip-test" title="Tooltip" data-behavior="BS.Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-behavior="BS.Tooltip">that link</a> should have tooltips on hover.</p>

        <hr>

        <h4>Overflowing text to show scroll behavior</h4>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<a data-trigger="BS.showPopup" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
Launch login form example modal
<div data-behavior="BS.Popup" id="login" class="modal fade">
  <form class="form-inline">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myModalLabel">Log In</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
          </div>
          <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </form>
</div><!-- /.modal -->
<a data-trigger="BS.showPopup" href="#login" class="btn btn-primary btn-lg">Launch login form example modal</a>

Usage

Via data attributes

Activate a modal without writing JavaScript. Set data-behavior="BS.Popup" on the modal and then on a controller element, like a button, set data-trigger="BS.showPopup" with href="#foo" to target a specific modal to toggle.

<button type="button" data-trigger="BS.showPopup" href="#myModal">Launch modal</button>

Behavior Options

These options apply only to the data- tag invocation. See the documentation at the bottom for JavaScript options, methods, and events.

Name type default description
persist boolean true If false the popup and its modal layer will be destroyed when it is closed. Useful when you are fetching the popup with Ajax.
hide boolean false Do not show the Popup immediately.
mask boolean true Includes a modal-backdrop element.
animate boolean true Slides the window into and out of view with a smooth transition.
closeOnClickOut boolean true Close the popup when the user clicks out of it (on the mask or, if it's not used, the document body outside the popup).
closeOnEsc boolean false Closes the modal when escape key is pressed
focusOnShow string input[type=text], select, textarea A selector (string) to find an element relative to the root of the popup whose `select` method will be called on show.
moveElementTo string ~ If defined, moves the element to the bottom of the target DOM element. Useful when your template requires you to nest the popup deep inside the DOM and you wish to move it up to the document.body.

Show your popup on load... or not

This implementation mirrors that found in Twitter's JS library. It uses CSS transitions when available (generally speaking, every browser but IE). Add the .fade class to your element to have it transition in. You can alternately specify the animate option in the behavior filter settings listed above. If you do not specify either of these, you should add the .hide class unless you want your element visible immediately.

Elements that close your popup

Any element in your content with the class .close or .dismiss will close the popup. The reason for both is that Bootstrap provides styles for .close elements (the *x* in the upper right corner) that you may not want applied to your element. By default, the default behavior for the click event on these elements is NOT stopped (so if they are submit buttons or actual links with href properties, those actions will occur). Add the class stopEvent to have the class call Event.preventDefault for you.

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

new Bootstrap.Popup(myElement, options).show();

Related Documentation

Note: Not all links in these work.

Behavior Filter: Behavior.BS.Popup

A behavior filter to instantiate Bootstrap popups.

Demo / Fancy Docs

http://anutron.github.com/mootools-bootstrap/#modal

Example


<button data-trigger="BS.showPopup" data-bs-showpopup-target="!body #demoPopup"
        class="btn">Launch Modal</button>

<div data-behavior="BS.Popup" class="modal hide" id="demoPopup">
    <div class="modal-header">
        <a href="#" class="close">x</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>One fine body...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Primary</a>
        <a href="#" class="btn secondary">Secondary</a>
    </div>
</div>

Options

  • persist - (boolean) When true (the default) the popup is not destroyed when it is closed.
  • closeOnClickOut - (boolean) If true (the default) the popup is closed when the user clicks outside of it.
  • closeOnEsc - (boolean) When true (the default) the popup is closed when the user hits escape.
  • mask - (boolean) When true (the default) a mask is placed below the popup element.
  • animate - (boolean) When true (the default) the mask and the window are displayed with a transition effect.
  • hide - (boolean) When true the popup is not displayed. Use the BS.showPopup delegator to show it. Defaults to false.

Class: Bootstrap.Popup

Creates a popup dialogue that works with Bootstrap.

Implements

Bootstrap.Popover Method: constructor

Syntax

new Bootstrap.Popover(element[, options]);

Arguments

  1. element - (mixed) A string of the id for an Element or an Element of the popup.
  2. options - (object, optional) a key/value object of options

Options

  • persist - (boolean) When true (the default) the popup is not destroyed when it is closed.
  • closeOnClickOut - (boolean) If true (the default) the popup is closed when the user clicks outside of it.
  • closeOnEsc - (boolean) When true (the default) the popup is closed when the user hits escape.
  • mask - (boolean) When true (the default) a mask is placed below the popup element.
  • animate - (boolean) When true (the default) the mask and the window are displayed with a transition effect.
  • changeDisplayValue (boolean) When true (the default), the popup element's display property is toggled between block and none on the end of the transitions.
  • focusOnShow (string) A selector (string) to find an element relative to the root of the popup whose select method will be called on show. Defaults to input[type=text], select, textarea.

Events

  • show - (function) Fired when the popup is displayed.
  • hide - (function) Fired when the popup is hidden.
  • animate - (function) Fired when the transition effect is started. Passed as its argument true if the popup is being displayed, false if being hidden.

Note

Any element in your content with the class .close or .dismiss will close the popup. The reason for both is that Bootstrap provides styles for .close elements (the x in the upper right corner) that you may not want applied to your element.

By default, the default behavior for the click event on these elements is NOT stopped (so if they are submit buttons or actual links with href properties, those actions will occur). Add the class stopEvent to have the class call Event.preventDefault for you.

Bootstrap.Popup Method: show

Show the dialogue.

Syntax

myPopup.show();

Returns

  • (object) This Bootstrap.Popup instance.

Bootstrap.Popup Method: hide

Hide the dialogue.

Syntax

myPopup.hide();

Returns

  • (object) This Bootstrap.Popup instance.

Bootstrap.Popup Method: destroy

Destroys the dialogue element and detaches the event listeners.

Syntax

myPopup.destroy();

Returns

  • (object) This Bootstrap.Popup instance.