Я внедряю простые элементы Popover на моем веб -сайте.
Они принимают c. 80% ширины просмотра, поэтому я включил фон размытого эффекта вокруг Поповер. < /P>
.mb_popbox::backdrop {
backdrop-filter: blur(5px);
}
< /code>
Проблема: < /h2>
При нажатии за пределы Popover: < /p>
желаемый эффект должен быть для выключения Элемент Popover, щелкнув только в любом случае. Очень раздражает < /p>
Пример < /h2>
html: < /p>
Menu
Zamknij
< /code>
css: < /p>
.mb_popbox {
width: 70%;
margin: 2rem auto;
min-height: 20rem;
max-height: 80%;
padding: 3rem;
background: #444;
color: #fff;
border: 3px solid #eee;
}
.mb_popbox::backdrop {
backdrop-filter: blur(5px);
}
< /code>
todo < /h2>
Есть ли какой-нибудь книжный способ предотвратить случайную ссылку и нажатия кнопки? < /p>
Обходной путь очевиден: сделайте 100% шириной и 100% высокий див, а затем постройте фактический полезный контент шириной 80% и высотой 80% в верхней части площади фона. Плюс необходимый JS для кликов по «внешней». Я хочу избежать этого, так как это не элегантно IMO.
Подробнее здесь: https://stackoverflow.com/questions/794 ... s-backdrop
