Add blured background behind keyboard
GenijeOnline opened this issue · comments
Hello to all.
Please help me to figure it out, how to make that the page (behind keyboard) goes blur when keyboard is open.
I have this:
visible: function() {
$('body').addClass('overlay-active');
},
hidden: function() {
$('body').removeClass('overlay-active');
}
but this only change back page color (add grey overlay).
I would like to add blur to this overlay.
Thanks.
Hi @GenijeOnline!
Try this (demo):
CSS
.keyboard-modal {
z-index: 15999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
JS
$(function() {
$('#keyboard').keyboard({
visible: function(e, keyboard, el) {
var modal = $('<div class="keyboard-modal"></div>');
keyboard.$keyboard.before(modal);
modal.click(function(e) {
keyboard.accept();
return false;
});
},
beforeClose: function(e, keyboard, el, accepted) {
$('.keyboard-modal').remove();
}
});
});
Oh, use backdrop-filter
- it's not yet supported by all browsers by default, but it'll add that blur effect.
.keyboard-modal {
z-index: 15999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(4px);
}
Note: that z-index
is based on the bootstrap modal being set to a z-index
of 16000
.
Great! That's it. Thank you!
Hey again.
I have an issue with this.. I found that keyboard is really slow after adding this blur.
I think this is caused by backdrop-filter.. I use it on Raspberry Pi Chromium browser.