html knowhow

Pop-up Fenster bewegen

So sieht´s aus

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