Components.Modal public

Component for creating Bootstrap modals with custom markup.

Usage

<BsModal @onSubmit={{action "submit"}} as |Modal|>
  <Modal.header>
    <h4 class="modal-title"><i class="glyphicon glyphicon-alert"></i> Alert</h4>
  </Modal.header>
  <Modal.body>
    Are you absolutely sure you want to do that???
  </Modal.body>
  <Modal.footer as |footer|>
    <BsButton @onClick={{action Modal.close}} @type="danger">Oh no, forget it!</BsButton>
    <BsButton @onClick={{action Modal.submit}} @type="success">Yeah!</BsButton>
  </Modal.footer>
</BsModal>

The component yields references to the following contextual components, that you can use to further customize the output:

Furthermore references to the following actions are yielded:

  • close: triggers the onHide action and closes the modal
  • submit: triggers the onSubmit action (or the submit event on a form if present in the body element)

Further reading

See the documentation of the bs-modal-simple component for further examples.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.

adjustDialog

private

checkScrollbar

private

handleBackdrop

private

SHow/hide the backdrop

Parameters:

  • callback Object

handleUpdate

private

hide

private

Hide the modal

hideModal

private

Clean up after modal is hidden and call onHidden

resetAdjustments

private

resetScrollbar

private

resize

private

Attach/Detach resize event listeners

setScrollbar

private

show

private

Show the modal

_isOpen unknown private

_renderInPlace boolean private

backdrop boolean public

Default: true

Defined in addon/components/bs-modal.js:144

Use a semi-transparent modal background to hide the rest of the page.

backdropClose boolean public

Default: true

Defined in addon/components/bs-modal.js:261

If true clicking on the backdrop will close the modal.

backdropElement object private

The DOM element of the backdrop element.

backdropId string private

The id of the backdrop element.

backdropTransitionDuration number public

Default: 150

Defined in addon/components/bs-modal.js:304

The duration of the backdrop fade transition

bodyComponent {String} private

dialogComponent {String} private

fade boolean public

Default: true

Defined in addon/components/bs-modal.js:92

Set to false to disable fade animations.

footerComponent {String} private

headerComponent {String} private

inDom boolean private

Default: false

Defined in addon/components/bs-modal.js:119

Render modal markup?

isOpen unknown private

keyboard boolean public

Default: true

Defined in addon/components/bs-modal.js:164

Closes the modal when escape key is pressed.

modalElement object private

The DOM element of the .modal element.

modalId string private

The id of the .modal element.

onHidden function public

Default: null

Defined in addon/components/bs-modal.js:377

The action to be sent after the modal has been completely hidden (including the CSS transition).

onHide function public

The action to be sent when the modal is closing. This will be triggered by pressing the modal header's close button (x button) or the modal footer's close button. Note that this will happen before the modal is hidden from the DOM, as the fade transitions will still need some time to finish. Use the onHidden if you need the modal to be hidden when the action triggers.

You can return false to prevent closing the modal automatically, and do that in your action by setting open to false.

onShow function public

Default: null

Defined in addon/components/bs-modal.js:387

The action to be sent when the modal is opening. This will be triggered immediately after the modal is shown (so it's safe to access the DOM for size calculations and the like). This means that if fade=true, it will be shown in between the backdrop animation and the fade animation.

onShown function public

The action to be sent after the modal has been completely shown (including the CSS transition).

onSubmit function public

The action to be sent when the modal footer's submit button (if present) is pressed. Note that if your modal body contains a form (e.g. Components.Form) this action will not be triggered. Instead a submit event will be triggered on the form itself. See the class description for an example.

open boolean public

Default: true

Defined in addon/components/bs-modal.js:65

Visibility of the modal. Toggle to show/hide with CSS transitions.

When the modal is closed by user interaction this property will not update by using two-way bindings in order to follow DDAU best practices. If you want to react to such changes, subscribe to the onHide action

paddingLeft number|null private

paddingRight number|null private

position {string} public

Default: 'top'

Defined in addon/components/bs-modal.js:175

[BS4 only!] Vertical position, either 'top' (default) or 'center' 'center' will apply the modal-dialog-centered class

renderInPlace boolean public

Default: false

Defined in addon/components/bs-modal.js:272

If true component will render in place, rather than be wormholed.

scrollable boolean public

Default: false

Defined in addon/components/bs-modal.js:187

[BS4 only!] Allows scrolling within the modal body 'true' will apply the modal-dialog-scrollable class

scrollbarWidth number private

showBackdrop boolean private

Default: false

Defined in addon/components/bs-modal.js:155

showModal boolean private

Default: false

Defined in addon/components/bs-modal.js:108

Used to apply Bootstrap's visibility classes.

size String public

Property for size styling, set to null (default), 'lg' or 'sm'

Also see the Bootstrap docs

transitionDuration number public

Default: 300

Defined in addon/components/bs-modal.js:293

The duration of the fade transition

usesTransition boolean private

Use CSS transitions?

Classes