ember-stacking-lightbox

components.confirm-lightbox\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class extends Component {
  @service lightbox;
  
  @action
  click(response) {
    this.args.close(response);
  }
}

components.lightbox\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class extends Component {
  @service lightbox;
  
  @action
  close(item, result) {
    this.lightbox.close(item, result);
  }
}

components.user-lightbox\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class extends Component {
  @service lightbox;
  
  modalFields = {
    name: 'Nikolaj',
    surname: 'Teslya',
  };
  
  @action
  async updateUser() {
    const result = await this.lightbox.open('confirm', {
      message: 'Are you sure you want to update this user?',
    });
    if (result === 'yes') {
      console.log('Updating user with', this.modalFields);
      // @note close lb on successful update
      this.args.close('updated');
    }
    else {
      console.log('Cancelled user update');
    }
  }

  @action
  close() {
    this.args.close('normal');
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Stacking Lightbox Demo';
}

controllers.index\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class IndexController extends Controller {
  @service lightbox;
  
  @action
  showUser() {
    this.lightbox.open('user', {username: 'Melon Usk'});
  }
}

services.lightbox\.js

import Service from '@ember/service';

export default Service.extend({
  items: null,
  id: 0,

  init() {
    this._super(...arguments);
    this.set('items', []);
  },

  open(name, fields) {
    return new Promise(resolve => {
      const id = this.incrementProperty('id');
      this.items.pushObject({id, name, resolve, fields});
    });
  },

  close(item, result) {
    this.items.removeObject(item);
    item.resolve(result);
  },
});

styles.app\.css

html {
  background: no-repeat url('https://source.unsplash.com/600x600?window') 50% 100% / cover;
  box-sizing: border-box;
  min-height: 100vh;
}

body {
  background: rgba(255,255,255,0.85);
  margin: 12px 16px;
  padding: 12px 16px;
  font: 12pt sans-serif;
}

h1 {
  margin-top: 0;
}

templates.application\.hbs

<Lightbox />

<header>
  <h1>Welcome to {{this.appName}}</h1>
</header>

<main>
	{{outlet}}
</main>

templates.components.confirm-lightbox\.hbs

CONFIRM ME

{{@message}}

<button {{on "click" (fn this.click "yes")}}>
  Yes
</button>

<button {{on "click" (fn this.click "no")}}>
  No
</button>

templates.components.lightbox\.hbs

{{#each this.lightbox.items as |item|}}
  {{#let (concat item.name "-lightbox") as |Component|}}
    <Component
      @close={{fn this.close item}}
      ...item.fields
    />
  {{/let}}
{{/each}}

templates.components.user-lightbox\.hbs

User lightbox

Foo foo bar

<button {{on "click" this.updateUser}}>
  Save user
</button>

<button {{on "click" this.close}}>
  Close
</button>

templates.index\.hbs

<button {{on "click" this.showUser}}>
  Show User
</button>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0"
  }
}