Popup mit JavaScript und CSS#
eigentlich ist es ganz einfach. Aber immer wieder probiere ich herum, wenn ich dynamisch ein Popup auf einer Webseite anzeigen will.
Deshalb hier ein paar Code-Schnipsel
HTML#
eine index.html, die alles zusammenhält:
<html>
<head>
<title>Test Popup</title>
<style type="text/css" title="currentStyle">
@import "test.css";
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="test.js"></script>
</head>
<body>
<div id="popup" class="invisible">
<p>hello world!</p>
<p class="hier">Close</p>
</div>
<div id="content">
<h1>Intensiv-Kurs JavaScript</h1>
</div>
<p class="hier">Click</p>
</body>
</html>
CSS Styles#
Das test.css dazu:
.visible {
display:block;
position:absolute;
top:40px; left:60px;
border: black solid 1px;
background: white;
margin: 2px;
padding: 8px;
}
.invisible {
display:none;
}
.backgrey {
background: grey;
}
p,div {
margin: 1px;
padding: 1px;
}
JavaScript#
Zum Schluss die test.js-Datei, ein einfacher Click-Handler in JavaScript (mit JQuery):
$(document).ready(function() {
$(".hier").click(function() {
$("body").toggleClass("backgrey");
$("#popup").toggleClass("visible");
$("#popup").toggleClass("invisible");
});
});
Add new attachment
Only authorized users are allowed to upload new attachments.