Modal Popover

Demo

About Modal Popovers

Twitter Boostrap provides both modals and popovers, but sometimes you need a feature set that falls somewhere between the two. Modals provide a nice way to provide extra details without navigating away from the page completely, but they hide your current context and feel a bit 90's. Popovers are essentially stylish tooltips which provide a little extra information without losing context. However, they were designed to display static text making it difficult to add listeners to any components in the content. The mechanisms used to show and hide popovers are much more appropriate for tooltips than for dialogs.

Versions

Version 1.0 was tested against bootstrap 2.1.1
Version 2.x is designed to work with bootstrap 3.3.5

Please feel free to submit pull requests if you find an issue.

Examples

Positioning

Bottom Top Left Right

<!-- Button to launch modal popover -->
<a href="#popupBottom" role="button" class="btn btn-default" data-toggle="modal-popover" data-placement="bottom">Bottom</a>

<!-- Define content -->
<div id="popupBottom" class="popover">
    <div class="arrow"></div>
    <h3 class="popover-title">Bottom</h3>
    <div class="popover-content">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. 
            Pellentesque ornare sem lacinia quam venenatis vestibulum.
            <a href="#" class="btn btn-default helloWorld">Click me</a>
        </p>
    </div>
</div>

The Target can be Absolute Positioned

When the target is absolute positioned, place the modal directly after the trigger in the dom and set the modal-position option to 'relative':

Absolute

Usage

Please note the dialog currently needs to be immediately inside the body of the document. (see Issue #3)

Via data attributes

Activate a modal popover without writing JavaScript. Set data-toggle="modal-popover" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal-popover" data-target="#myModal">Launch modal</button>

Via JavaScript

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

$('#myModal').modalPopover(options)

Demo

A full demo of the method and events below is available on JSFiddle.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name	type	default	description
target	selector	none (required)	Specifies the content for the modal popup. Bootstrap's Modal doesn't need to reference a second element, because it has no context. It's this is the dialog. Bootstrap's Popover doesn't need to reference a second element because the content is just text. It's this is the context for the popup (the element the tooltip applies to). Motal Popover needs both a context (specified by the 'target' option) and content (this). The target can be specified in several ways: in the options object when configuring via javascript using data-target on the context object (see the 'remote' option for an example) using the href attribute on the context object (see the 'remote' option for an example)
placement	string\|function	'right'	how to position the popover - top \| bottom \| left \| right
modal-position	string	'body'	Specifies where the modal is in the dom. The value 'body' specifies the modal is directly within the body element. The value 'relative' specifies the modal is right after the trigger in the dom. The relative setting is useful for absolutely positioned targets.
backdrop	boolean	true	Inherited from Bootstrap's Modal. The backdrop is the area behind the popover that when clicked, closes the dialog. Unlike modals, the popover's backdrop isn't visible. When false, the popover must be closed pragmatically.
keyboard	boolean	true	Closes the modal when escape key is pressed. As with Bootstrap's Modal, this only works if the dialog has focusable components.
remote	path	false	If a remote url is provided, content will be loaded via jQuery's `load` method and injected into the `.popover-content`: Show External `<a href="#popupExternal" class="btn btn-default" data-toggle="modal-popover" data-remote="externalContent.html">Show External</a>` If you're using the data api, you may alternatively use the `href` tag to specify the remote source. An example of this is shown below: Show External `<a href="externalContent.html" class="btn btn-default" data-target="#popupExternal" data-toggle="modal-popover">Show External</a>`
placement	string	right	Specifies where the popup appears relative to the target. Valid values are left, right, top & bottom. see demos above

Methods

.modalPopover(options)

Initializes your content as a modalPopover. Accepts an optional options object.

$('#dialog').modalPopover({
    target: '#target'
});

Alternatively, the data-toggle="modal-popover" tag can be used on either the dialog or its target.

.modalPopover('toggle')

Manually toggles a modal.

$('#dialog').modalPopover('toggle')

.modalPopover('show')

Manually opens a modal.

$('#dialog').modalPopover('show')

.modalPopover('hide')

Manually hides a modal.

$('#dialog').modalPopover('hide')

Events

Several events are exposed to Modal Popover:

Event	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

$('#myModal').on('hidden', function () {
    // do something...
})

Related Projects

Before starting this project, I used boostrapx-clickvoer. It achieves the same results, but with a different api. It subclasses popover rather than modal, so the contents of the popover are based on text rather than an existing dom element. Because of this, the only way to add listeners or augment the html using javascript is to listen to each popup event, re-adding the listeners there. Also, the options are inherited from popover, and make more sense for tooltips than editable forms.

Modal Popovers bootstrap-modal-popover.js

About Modal Popovers

Versions

Examples

Positioning

The Target can be Absolute Positioned

Bottom

Usage

Via data attributes

Via JavaScript

Demo

Options

Methods

.modalPopover(options)

.modalPopover('toggle')

.modalPopover('show')

.modalPopover('hide')

Events

Related Projects

Demo Modal Popover

Bottom

Top

Left

Right

External Data

External Data

JavaScript Access