diff --git a/addon/components/au-modal.gjs b/addon/components/au-modal.gjs index 8b189b5a1..ad867b1d4 100644 --- a/addon/components/au-modal.gjs +++ b/addon/components/au-modal.gjs @@ -85,7 +85,7 @@ export default class AuModal extends Component { <template> {{#if @modalOpen}} - {{#in-element this.destinationElement}} + {{#in-element this.destinationElement insertBefore=null}} <div class="au-c-modal-backdrop {{if @modalOpen 'is-visible'}}"></div> <div id="{{@id}}" diff --git a/styles/components/_c-modal.scss b/styles/components/_c-modal.scss index b8c9ec0a4..73d9ac01d 100644 --- a/styles/components/_c-modal.scss +++ b/styles/components/_c-modal.scss @@ -6,7 +6,11 @@ ========================================================================== */ $au-modal-z-index: 9999 !default; -$au-modal-backdrop-z-index: 9998 !default; +$au-modal-backdrop-z-index: $au-modal-z-index !default; + +@if $au-modal-z-index != $au-modal-backdrop-z-index { + @warn "DEPRECATED $au-modal-backdrop-z-index. This property has been deprecated and $au-modal-z-index and $au-modal-backdrop-z-index have different values. This will result in unexpected behavior when showing multiple modals."; +} /* Component ========================================================================== */ diff --git a/tests/integration/components/au-modal-test.js b/tests/integration/components/au-modal-test.js index acdba178e..97aa520b2 100644 --- a/tests/integration/components/au-modal-test.js +++ b/tests/integration/components/au-modal-test.js @@ -248,4 +248,19 @@ module('Integration | Component | au-modal', function (hooks) { await click(closeButton); assert.strictEqual(timesCalled, 1); }); + + test('it can render multiple modals at once', async function (assert) { + await render(hbs` + <AuModalContainer /> + <AuModal @modalOpen={{true}}> + <div data-test-content-one>One!</div> + </AuModal> + <AuModal @modalOpen={{true}}> + <div data-test-content-two>Two!</div> + </AuModal> + `); + + assert.dom('[data-test-content-one]').containsText('One!'); + assert.dom('[data-test-content-two]').containsText('Two!'); + }); });