mebis/moodle: bedingtes PopUp (ohne JavaScript)

<style>
.modalmebis {
z-index: 9999;
display: block;
padding-top: 150px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/*Für Browser, die backdrop-filter nicht unterstützen*/
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.modalmebis {
background-color: rgba(0, 0, 0, .7);
}
}
.modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
max-width: 600px;
}
.modal-inner {
padding: 20px 30px;
}
.animate-opacity {
animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}
}
</style>

<div id="modal-1" class="modalmebis animate-opacity">
<div class="modal-content" style="margin-right: auto!important;">
<div class="modal-header">
<h3>Hinweis</h3></div>
<div class="modal-body">{firstname}, bitte denke daran die <a href="[<https://lernplattform.mebis.bayern.de/mod/assign/view.php?id=35081560>](<https://lernplattform.mebis.bayern.de/mod/assign/view.php?id=35081560>)">Aufgabe 2</a> bis Donnerstag abzugeben!</div>
<div class="modal-footer"><button type="button" class="btn btn-primary" onclick="document.getElementById('modal-1').style.display='none'">ok</button>
</div>
</div>
</div>

Wichtig: Bei mehreren modals muss die ID (z. B. "modal-1") unterschiedlich sein! Diese ist an zwei Stellen im Code zu finden.