<!-- 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>
When the target is absolute positioned, place the modal directly after the trigger in the dom and set the modal-position option to 'relative':
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Click me
Please note the dialog currently needs to be immediately inside the body of the document. (see Issue #3)
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>
Call a modal with id myModal
with a single line of JavaScript:
$('#myModal').modalPopover(options)
A full demo of the method and events below is available on JSFiddle.
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:
|
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
If you're using the data api, you may alternatively use the
|
placement | string | right | Specifies where the popup appears relative to the target. Valid values are left, right, top & bottom. see demos above |
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.
Manually toggles a modal.
$('#dialog').modalPopover('toggle')
Manually opens a modal.
$('#dialog').modalPopover('show')
Manually hides a modal.
$('#dialog').modalPopover('hide')
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... })
Edit some data related to this context:
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Click me
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Click me
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Click me
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Click me
loading...
loading...
Loaded using JavaScript