Skip to content

Commit 11d9e1c

Browse files
lenadaxlenadax
committed
create modal backdrop
1 parent d3e32c4 commit 11d9e1c

File tree

4 files changed

+42
-34
lines changed

4 files changed

+42
-34
lines changed

‎src/overlay.js‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,31 @@ export class Overlay extends Events {
2323
}
2424

2525
compile() {
26+
const zIndex = $('body').hasClass('modal-open') ? 1056 : 1055; // apply z-index for up zo 2 levels
2627
compile_template(this, `
27-
<div class="modal ${this.css}" id="${this.uid}" t-elem="elem">
28-
<div class="modal-dialog">
29-
<div class="modal-content">
30-
<div class="modal-header">
31-
<h5 class="modal-title">${this.title}</h5>
32-
<button class="btn-close close" t-prop="close_btn" t-bind-click="close">
33-
<span class="visually-hidden">Close</span>
34-
</button>
28+
<div class="modal-wrapper position-absolute" t-elem="wrapper" style="z-index: ${zIndex}">
29+
<div class="modal-backdrop opacity-25" t-elem="backdrop"></div>
30+
<div class="modal ${this.css}" id="${this.uid}" t-elem="elem">
31+
<div class="modal-dialog">
32+
<div class="modal-content">
33+
<div class="modal-header">
34+
<h5 class="modal-title">${this.title}</h5>
35+
<button class="btn-close close" t-prop="close_btn" t-bind-click="close">
36+
<span class="visually-hidden">Close</span>
37+
</button>
38+
</div>
39+
<div class="modal-body" t-elem="body">${this.content}</div>
40+
<div class="modal-footer" t-elem="footer"></div>
41+
</div>
3542
</div>
36-
<div class="modal-body" t-elem="body">${this.content}</div>
37-
<div class="modal-footer" t-elem="footer"></div>
3843
</div>
3944
</div>
40-
</div>
41-
`);
45+
`);
4246
}
4347

4448
open() {
4549
$('body').addClass('modal-open');
46-
this.container.append(this.elem);
50+
this.container.append(this.wrapper);
4751
this.elem.show();
4852
this.is_open = true;
4953
this.trigger('on_open');
@@ -53,9 +57,9 @@ export class Overlay extends Events {
5357
if ($('.modal:visible').length === 1) {
5458
$('body').removeClass('modal-open');
5559
}
56-
ajax_destroy(this.elem);
60+
ajax_destroy(this.wrapper);
61+
this.wrapper.remove();
5762
this.is_open = false;
58-
this.elem.removeData('overlay').remove();
5963
this.trigger('on_close');
6064
}
6165
}

‎tests/test_ajax.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1220,7 +1220,7 @@ QUnit.module('treibstoff.ajax', hooks => {
12201220
dispatcher.bind(elem.get(0), 'click');
12211221

12221222
elem.trigger('click');
1223-
let dialog = $('body > .modal.dialog').data('overlay');
1223+
let dialog = $('body > .modal-wrapper > .modal.dialog').data('overlay');
12241224
assert.deepEqual(dialog.content, 'Really?');
12251225
assert.ok(dialog.is_open);
12261226

@@ -1229,7 +1229,7 @@ QUnit.module('treibstoff.ajax', hooks => {
12291229
assert.deepEqual(dispatch_opts, null);
12301230

12311231
elem.trigger('click');
1232-
dialog = $('body > .modal.dialog').data('overlay');
1232+
dialog = $('body > .modal-wrapper > .modal.dialog').data('overlay');
12331233
assert.ok(dialog.is_open);
12341234

12351235
$('button.ok', dialog.elem).trigger('click');
@@ -1561,7 +1561,7 @@ QUnit.module('treibstoff.ajax', hooks => {
15611561
flavor: 'info',
15621562
selector: null,
15631563
}]);
1564-
let ol = $('body > .modal.info').data('overlay');
1564+
let ol = $('body > .modal-wrapper > .modal.info').data('overlay');
15651565
assert.ok(ol.is_open);
15661566
assert.deepEqual(ol.content, 'Message Content');
15671567
ol.close();

‎treibstoff/bundle/treibstoff.bundle.js‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -607,26 +607,30 @@ var ts = (function (exports, $) {
607607
this.is_open = false;
608608
}
609609
compile() {
610+
const zIndex = $('body').hasClass('modal-open') ? 1056 : 1055;
610611
compile_template(this, `
611-
<div class="modal ${this.css}" id="${this.uid}" t-elem="elem">
612-
<div class="modal-dialog">
613-
<div class="modal-content">
614-
<div class="modal-header">
615-
<h5 class="modal-title">${this.title}</h5>
616-
<button class="btn-close close" t-prop="close_btn" t-bind-click="close">
617-
<span class="visually-hidden">Close</span>
618-
</button>
612+
<div class="modal-wrapper position-absolute" t-elem="wrapper" style="z-index: ${zIndex}">
613+
<div class="modal-backdrop opacity-25" t-elem="backdrop"></div>
614+
<div class="modal ${this.css}" id="${this.uid}" t-elem="elem">
615+
<div class="modal-dialog">
616+
<div class="modal-content">
617+
<div class="modal-header">
618+
<h5 class="modal-title">${this.title}</h5>
619+
<button class="btn-close close" t-prop="close_btn" t-bind-click="close">
620+
<span class="visually-hidden">Close</span>
621+
</button>
622+
</div>
623+
<div class="modal-body" t-elem="body">${this.content}</div>
624+
<div class="modal-footer" t-elem="footer"></div>
625+
</div>
619626
</div>
620-
<div class="modal-body" t-elem="body">${this.content}</div>
621-
<div class="modal-footer" t-elem="footer"></div>
622627
</div>
623628
</div>
624-
</div>
625-
`);
629+
`);
626630
}
627631
open() {
628632
$('body').addClass('modal-open');
629-
this.container.append(this.elem);
633+
this.container.append(this.wrapper);
630634
this.elem.show();
631635
this.is_open = true;
632636
this.trigger('on_open');
@@ -635,9 +639,9 @@ var ts = (function (exports, $) {
635639
if ($('.modal:visible').length === 1) {
636640
$('body').removeClass('modal-open');
637641
}
638-
ajax_destroy(this.elem);
642+
ajax_destroy(this.wrapper);
643+
this.wrapper.remove();
639644
this.is_open = false;
640-
this.elem.removeData('overlay').remove();
641645
this.trigger('on_close');
642646
}
643647
}

0 commit comments

Comments
 (0)