HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?
Hallo,
ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.
HTML Part:
<html>
<header>
<link rel="stylesheet" href="css/style.css">
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>
<body onload="startTime()"> <div id="overlay">
<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>
<!-- --> <div id="ajaxdiv"> </div> <!-- -->
<br><br>
<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>
<?php include "connect/users.php"; ?>
</div> </body> </html>
CSS Part:
body {
background-color: whitesmoke;
/overflow: hidden;/
z-index: 0;
}
#overlay{
/display: none;/
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .5;
z-index: 3;
filter: blur(2px);
visibility: hidden;
}
JS Part:
function openForm() {
document.getElementById("myForm").style.display = "block";
document.getElementById("overlay").style.display = "block"; <---
startTimer();
}
function hideDiv() {
document.getElementById('myForm2').reset();
//$("#client")[0].reset();
document.getElementById('myForm').style.display = 'none';
document.getElementById("overlay").style.display = "none"; <---
}
4 Antworten
Wenn du etwas unschärfer gestalten willst, dann hilft dir dieser Link:
https://www.w3schools.com/howto/howto_css_image_effects.asp
Ansonsten würde ich dir raten, mit Frameworks oder mit CSS Libraries wie Bootstrap etc zu arbeiten.
Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg.
Ohne Kenntniss des Inhalts der Elemente mit den id's 'myForm', 'overlay' und 'myForm2' wird dir kaum jemand helfen können.
Alex
Validiere bitte erst mal deinen Code und poste ihn dann hier korrekt. Dein zweiter Script-Aufruf ist falsch (type="text/javashttps…) und statt den HEAD-Element hast du HEADER genommen, was an dieser Stelle falsch ist.
Weiter habe ich dann gar nicht mehr geschaut.
Gewöhne dir mal an den kompletten Code zu Posten - am besten in Pastebin.
Wer möchte schon diesen unvollständigen "Salat" auswerten....