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 theonHideaction and closes the modalsubmit: triggers theonSubmitaction (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.
Item Index
Methods
Properties
- _isOpen
- _renderInPlace
- backdrop
- backdropClose
- backdropElement
- backdropTransitionDuration
- bodyComponent
- dialogComponent
- fade
- footerComponent
- fullscreen
- headerComponent
- inDom
- keyboard
- modalElement
- onHidden
- onHide
- onShow
- onShown
- onSubmit
- open
- paddingLeft
- paddingRight
- position
- renderInPlace
- scrollable
- scrollbarWidth
- shouldShowBackdrop
- showModal
- size
- transitionDuration
- usesTransition
adjustDialog
privatecheckScrollbar
privatehide
privateHide the modal
hideBackdrop
private asyncHide the backdrop
hideModal
privateClean up after modal is hidden and call onHidden
resetAdjustments
privateresetScrollbar
privatesetScrollbar
privateshow
privateShow the modal
showBackdrop
private asyncShow the backdrop
_isOpen unknown private
_renderInPlace boolean private
backdrop boolean public
Use a semi-transparent modal background to hide the rest of the page.
backdropClose boolean public
If true clicking on the backdrop will close the modal.
backdropElement HTMLElement private
The DOM element of the backdrop element.
backdropTransitionDuration number public
The duration of the backdrop fade transition
bodyComponent {String} private
dialogComponent {String} private
fade boolean public
Set to false to disable fade animations.
fullscreen {(Boolean|String)} public
[BS5 only!] Allows adding fullscreen mode for modals. It will
apply the modal-fullscreen class when using true and
modal-fullscreen-[x]-down class when using BS breakpoints
([x] = sm, md, lg, xl, xxl).
Also see the Bootstrap docs
headerComponent {String} private
inDom boolean private
Render modal markup?
keyboard boolean public
Closes the modal when escape key is pressed.
modalElement HTMLElement private
The DOM element of the .modal element.
onHidden function public
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
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
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|undefined private
paddingRight number|undefined private
position {string} public
[BS4 only!] Vertical position, either 'top' (default) or 'center'
'center' will apply the modal-dialog-centered class
renderInPlace boolean public
If true component will render in place, rather than be wormholed.
scrollable boolean public
[BS4 only!] Allows scrolling within the modal body
'true' will apply the modal-dialog-scrollable class
scrollbarWidth number private
shouldShowBackdrop boolean private
showModal boolean private
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
The duration of the fade transition
usesTransition boolean private
Use CSS transitions?