Add blured background behind keyboard

[GenijeOnline]

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.

[Mottie]

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();
    }
  });
});

[GenijeOnline]

Nope..it's pretty-much the same effect that I get..it is only overlay. The thing I want is something like this with -webkit-filter: blur(10px); in CSS..but ofcourse blur only backpage (it is html page, not picture) and keep keyboard focused.

[Mottie]

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.

[GenijeOnline]

Great! That's it. Thank you!

[GenijeOnline]

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.

[Mottie]

https://stackoverflow.com/questions/58033230/css-backdrop-filter-too-slow