Wie verhindern Sie, dass Sie auf Schaltflächen unter dem Hintergrund eines CSS -Popover klicken? ⇐ CSS

[Anonymous]

Ich implementiere einfache Popover -Elemente auf meiner Website.
Sie nehmen c. 80% der Breite des Ansichtsfensters, daher habe ich einen Unschärfe -Effekt -Hintergrund im Popover ermöglicht. < /P>
.mb_popbox::backdrop {
backdrop-filter: blur(5px);

}
< /code>
Das Problem: < /h2>
Beim Klicken außerhalb des Popovers: < /p>
sollte der gewünschte Effekt bestehen, um herunterzufahren Das Popover -Element durch Klicken auf nur auf der Außenseite. Sehr nervig < /p>
Ein Beispiel < /h2>
HTML: < /p>


Menu

• Link 1

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>
Gibt es eine BY-the-Buch-Möglichkeit, um den zufälligen Link und die Schaltfläche zu verhindern? < /p>
Eine Problemumgehung ist offensichtlich: Machen Sie eine 100% breite und 100% hohe DIV und bauen Sie dann den tatsächlichen nutzbaren Inhalt von 80% breit und 80% hoch auf dem Hintergrund. Plus notwendige JS für Klicks auf "Outside" Ich möchte dies vermeiden, da es sich nicht um elegante IMO handelt.