diedVIPs

html knowhow

Pop-up Fenster bewegen










Pop-up Fenster bewegen

So sieht´s aus
Meine Nachricht

MeinSolargarten ist eine Initiative von Hans Busch und Karin Lieberwirth, um unsere Erfahrungen im Umgang mit einer Solaranlage mit zentraler Gartenbewässerung weiterzugeben. Wir wollen auch zeigen, was man mit dem Solarstrom noch alles machen kann. Auch unsere Erfahrungen und Aktivitäten möchten wir hier dokumentieren und insbesondere Empfehlungen sowie Anregungen zum Nachbau geben. Weiterhin bieten wir getestete Angebote, wo Sie die Geräte, Pflanzen und Samen im Internet kaufen können.

Quellcode
<html>
<head>
<style type="text/css">
div#pop-up {background: Whitesmoke; outline: Solid 5px green; width: 350px; height: 400px; position: Absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
box-shadow: 0px 0px 15px 8px rgba(180,180, 180, 0.55);}
div#move {background: green; color: yellow; text-align: Center; cursor: Move; font-size: 2rem; font-weight: Bold; user-select: None;}
div#pop-up>p {padding: 20px;}
div#pop-up>p::first-letter {font-size: 1.6rem;}
</style>
</head>

<body >
<div id="pop-up"> <div id="move">Meine Nachricht</div>
<p>Ihr Text ....</p>
</div>

<script>
var selected = null,
x_pos = 0,
y_pos = 0,
x_elem = 0,
y_elem = 0;
function _drag_init(elem) {
//selected = elem;
selected = document.getElementById("pop-up");
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
}
function _move_elem(e) {
x_pos = e.pageX;
y_pos = e.pageY;
if (selected !== null) {
selected.style.left = x_pos - x_elem + "px";
selected.style.top = y_pos - y_elem + "px";
}
}
function _destroy() {
selected = null;
}
document.getElementById("move").onmousedown = function() {
_drag_init(this);
return false;
};
document.onmousemove = _move_elem;
document.onmouseup = _destroy;
</script>

</body>

</html>







Kontakt    Datenschutz   Impressum