Fenster über der Website
- Ersteller pumi
- Erstellt am
mikdoe
Moderator
Aber wenn dir z-index nichts sagt, fehlt dir wesentliches an CSS Kenntnissen. Wo genau soll die Hilfe denn anfangen oder was genau möchtest du haben? Fertigen Code, Schritt für Schritt oder wie genau? Und warum keine Framework? Willst du dich wirklich mit den Eigenheiten aller Browser ärgern?
Ja mir fehlt noch einiges an Wissen. Habe aber schon mehrere Css-Tuts angeschaut, aber dieser ominöse Z-Index
ist mir da nicht untergekommen, werde es mir aber mal anschauen. Ein Ansatz reicht mir. Oder ein Beispiel.
Framework deshalb nicht, weil ich keine Webseiten erstelle, sondern Formulare in einem speziellen Programm,
welches Javascript zum Scripten bereit hält.
ist mir da nicht untergekommen, werde es mir aber mal anschauen. Ein Ansatz reicht mir. Oder ein Beispiel.
Framework deshalb nicht, weil ich keine Webseiten erstelle, sondern Formulare in einem speziellen Programm,
welches Javascript zum Scripten bereit hält.
J
j-l-n
Guest
So, hab dir mal ein altes Skript von mir rausgegraben und ein bisschen angepasst:
@Mods: diese Frage gehört m.E. eher nach CSS/HTML oder Allgemeines.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>open modal dialog and place overlay over rest of website</title>
<meta charset="UTF-8">
<style>
* {
font-family: Trebuchet MS, sans-serif;
color: #6489C9;
}
#overlay {
z-index: 10000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
#dialog {
z-index: 10001;
position: fixed;
left: 50%;
top: 50%;
padding: 20px;
border: 5px solid #6489C9;
border-radius: 10px;
background-color: #FFFFFF;
text-align: center;
overflow: auto;
width: 60%;
height: 50%;
transform: translate(-50%, -50%);
}
</style>
<!-- hack for IE: IE ≤ 9 does not support transfrom and IE ≤ 8 does not support alpha-transparency with rgba() and opacity -->
<!--[if lte IE 9]>
<style>
#overlay {
background-color: #000000;
opacity: 0.5;
filter:alpha(opacity=50);
}
#dialog {
width: 500px;
margin-left: -250px; /* negative half of width */
height: 300px;
margin-top: -150px; /* negative half of height */
}
</style>
<![endif]-->
<script>
function bindEvent(el, evt, fct){
if(document.addEventListener){
el.addEventListener(evt, fct);
}
else{
if(evt === "DOMContentLoaded"){
el = window;
evt = "load";
}
evt = "on" + evt;
if(document.attachEvent){
el.attachEvent(evt, fct);
}
else{
el.evt = fct;
}
}
console.log("added Eventlistener „" + evt + "“ to element ", el, ".\nBound function: ", fct);
}
function overlay(dialog){
var overlay = document.createElement("div");
overlay.id = "overlay";
bindEvent(overlay, "click", function(){
dialog.style.display = "none";
document.body.removeChild(overlay);
});
document.body.appendChild(overlay);
dialog.style.display = "";
}
bindEvent(document, "DOMContentLoaded", function(){
document.getElementById("call").onclick = function(){
overlay(document.getElementById("dialog"));
}
});
</script>
</head>
<body>
<div id="dialog" style="display:none">
<h1>login:</h1><br>
username: <input type="text"> password: <input type="password"><br><br>
<button> login </button>
</div>
<h1>open modal dialog and place overlay over rest of website</h1>
<br>
<button id="call"> open dialog </button>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p>footer</p>
</body>
</html>@Mods: diese Frage gehört m.E. eher nach CSS/HTML oder Allgemeines.
Zuletzt bearbeitet:
mikdoe
Moderator
Ja, denke ich auch, da ja nicht nur JS gefragt ist. Daher verschoben.
J
j-l-n
Guest
Bitteschön - gern geschehen. Du kannst dir das Ganze ja mal in Ruhe ansehen, und wenn sich dann Fragen ergeben sollten, die einfach hier stellen.