add blur when several modals are opened
This commit is contained in:
parent
2655088ee6
commit
b686fd5285
|
@ -540,6 +540,10 @@ form {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal.show.blur {
|
||||||
|
filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
.output {
|
.output {
|
||||||
&-console {
|
&-console {
|
||||||
background: #073642;
|
background: #073642;
|
||||||
|
|
|
@ -9,10 +9,10 @@ const openModal = function (url, createModal) {
|
||||||
|
|
||||||
let container = $(`#${id}`)
|
let container = $(`#${id}`)
|
||||||
const body = $('body')
|
const body = $('body')
|
||||||
let doTrigger = true
|
const doTrigger = true
|
||||||
|
|
||||||
if (!container.length) {
|
if (!container.length) {
|
||||||
let doTrigger = false
|
const doTrigger = false
|
||||||
container = $(`<div id="${id}" class="modal">`)
|
container = $(`<div id="${id}" class="modal">`)
|
||||||
|
|
||||||
body.append(container)
|
body.append(container)
|
||||||
|
@ -30,19 +30,39 @@ const openModal = function (url, createModal) {
|
||||||
loader.remove()
|
loader.remove()
|
||||||
|
|
||||||
if (doTrigger) {
|
if (doTrigger) {
|
||||||
container.trigger('shown.bs.modal')
|
container.trigger('shown.bs.modal')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onShownAndHide = () => {
|
||||||
|
$('.modal-backdrop.show').each((key, value) => {
|
||||||
|
if (key) {
|
||||||
|
$(value).remove()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const modals = $('.modal.show')
|
||||||
|
|
||||||
|
modals.each((key, value) => {
|
||||||
|
value.classList.toggle('blur', (key + 1) < modals.length)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = function () {
|
module.exports = function () {
|
||||||
let click = 0
|
let click = 0
|
||||||
const body = $('body')
|
const body = $('body')
|
||||||
|
|
||||||
|
body.on('shown.bs.modal', '.modal', onShownAndHide)
|
||||||
|
|
||||||
body.on('hidden.bs.modal', '.modal', (e) => {
|
body.on('hidden.bs.modal', '.modal', (e) => {
|
||||||
|
$(e.target).remove()
|
||||||
|
|
||||||
if ($('.modal.show').length) {
|
if ($('.modal.show').length) {
|
||||||
$('body').addClass('modal-open')
|
$('body').addClass('modal-open')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onShownAndHide()
|
||||||
})
|
})
|
||||||
|
|
||||||
body.on('click', '*[data-modal]', (e) => {
|
body.on('click', '*[data-modal]', (e) => {
|
||||||
|
@ -60,9 +80,9 @@ module.exports = function () {
|
||||||
|
|
||||||
click = 0
|
click = 0
|
||||||
|
|
||||||
let element = $(e.target).is('[data-modal]') ? $(e.target) : $(e.target).parents('*[data-modal]').first()
|
const element = $(e.target).is('[data-modal]') ? $(e.target) : $(e.target).parents('*[data-modal]').first()
|
||||||
let url = element.attr('data-modal')
|
const url = element.attr('data-modal')
|
||||||
let createModal = element.is('[data-modal-create]')
|
const createModal = element.is('[data-modal-create]')
|
||||||
|
|
||||||
openModal(url, createModal)
|
openModal(url, createModal)
|
||||||
}, 250)
|
}, 250)
|
||||||
|
|
|
@ -134,11 +134,11 @@
|
||||||
{% if context == 'tinymce' %}
|
{% if context == 'tinymce' %}
|
||||||
{% if not isLocked %}
|
{% if not isLocked %}
|
||||||
{% if splInfo.isDir %}
|
{% if splInfo.isDir %}
|
||||||
<button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_directory_rename', {file: splInfo.relativePathname, ajax: ajax}) }}">
|
<button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_directory_rename', {file: splInfo.relativePathname, ajax: ajax}) }}" data-modal-create>
|
||||||
{{ 'Rename'|trans }}
|
{{ 'Rename'|trans }}
|
||||||
</button>
|
</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_file_rename', {file: splInfo.relativePathname, ajax: ajax}) }}">
|
<button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_file_rename', {file: splInfo.relativePathname, ajax: ajax}) }}" data-modal-create>
|
||||||
{{ 'Rename'|trans }}
|
{{ 'Rename'|trans }}
|
||||||
</button>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
Loading…
Reference in a new issue