diff --git a/addon/components/uk-modal.js b/addon/components/uk-modal.js index c056ca5b..8193b21f 100644 --- a/addon/components/uk-modal.js +++ b/addon/components/uk-modal.js @@ -7,7 +7,18 @@ import { getOwner } from "@ember/application"; export default Component.extend({ layout, - closable: true, + escClose: true, + bgClose: true, + stack: false, + container: true, + clsPage: "uk-modal-page", + clsPanel: "uk-modal-dialog", + selClose: [ + ".uk-modal-close", + ".uk-modal-close-default", + ".uk-modal-close-outside", + ".uk-modal-close-full" + ].join(", "), init() { this._super(...arguments); @@ -31,9 +42,13 @@ export default Component.extend({ this.set( "modal", UIkit.modal(id, { - container: false, - bgClose: this.get("closable"), - escClose: this.get("closable") + escClose: this.get("escClose"), + bgClose: this.get("bgClose"), + stack: this.get("stack"), + container: this.get("container"), + clsPage: this.get("clsPage"), + clsPanel: this.get("clsPanel"), + selClose: this.get("selClose") }) ); diff --git a/tests/dummy/app/templates/components/modal.hbs b/tests/dummy/app/templates/components/modal.hbs index ba0b874b..13bb20e5 100644 --- a/tests/dummy/app/templates/components/modal.hbs +++ b/tests/dummy/app/templates/components/modal.hbs @@ -3,7 +3,6 @@
{{#uk-modal visible=visible - closable=closable on-submit=(action "submit") }}

Test

@@ -48,15 +47,67 @@ - closable + escClose Boolean true - Whether the modal can be closed (only read during initialization) + Close the modal when the Esc key is pressed. + + + + bgClose + Boolean + true + Close the modal when the background is clicked. + + + + stack + Boolean + true + Stack modals, when more than one is open. By default, the previous modal will be hidden. + + + + container + String + true + Define a target container via a selector to specify where the modal should be appended in the DOM. Setting it to false will prevent this behavior. + + + + clsPage + String + "uk-modal-page" + Class to add to <body> when modal is active. + + + + clsPanel + String + "uk-modal-dialog" + Class of the element to be considered the panel of the modal. + + + + selClose + String + + ".uk-modal-close, + .uk-modal-close-default, + .uk-modal-close-outside, + .uk-modal-close-full" + + CSS selector for all elements that should trigger the closing of the modal.
+ +

+ Note + Most of the settings are only read during initialization and can thus not be changed in the demo. +

{{/content.item}} {{#content.item}} {{code-snippet name="modal.hbs"}}