Как отключить фон, когда отображается боковая панель, и нажатие на любое место, кроме боковой панели, закроет боковую па ⇐ CSS

[Anonymous]

Я создаю боковую панель для своего веб-сайта.

• Когда появляется моя боковая панель (нажата кнопка showRight), я хочу отключить фоновое содержимое, чтобы пользователь не мог делать что-либо за пределами меню.
• Когда пользователь щелкает фон, боковая панель исчезает, а затем он снова получает доступ к фоновому содержимому. Прямо сейчас я закрываю боковую панель при нажатии кнопки «Скрыть».

Кто-нибудь может мне помочь?
Вот мой код:



.cbp-spmenu {
background: #fff;
position: fixed;
}

.cbp-spmenu-vertical {
width: 400px;
height: 100%;
top: 0;
z-index: 1000;
}

.cbp-spmenu-right {
right: -400px;
}

.cbp-spmenu, #cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Avinash

Show
Hide


var menuRight = document.getElementById( 'cbp-spmenu-s1' ),
showRight = document.getElementById( 'showRight' ),
showRight2 = document.getElementById( 'showRight2' ),
content = document.getElementById( 'avi' ),
menu = document.getElementById( 'menu' ),
body = document.body;

showRight.onclick = function() {
classie.add(this,"active");
menuRight.style.right = '0px';
content.style.opacity = '0.5';
body.style.display = 'block';
};

showRight2.onclick = function() {
if (classie.has(showRight,"active")) {
menuRight.style.right = '-400px';
classie.remove(showRight,"active");
content.style.opacity = '1';
}
};






Подробнее здесь: https://stackoverflow.com/questions/295 ... e-anywhere