Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to realize the draggable mode box in JavaScript. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The details are as follows

Code:

HTML code section:

* {margin: 0px; padding: 0px;} .login-header {width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; cursor: pointer;} .login {display: none Width: 500px; height: 280px; position: fixed; border: 1px # ebebeb solid; left: 50%; top: 50%; background: # fff; box-shadow: 0px 0px 20px # ddd; z-index: 999; transform: translate (- 50% transform 50%) }. Login-title {width: 100%; margin: 10px 0px 0px 0px; text-align: center; height: 40px; line-height: 40px; font-size: 10px; position: relative; cursor: move;}. Login-title span {position: absolute Font-size: 12px; right:-20px; top:-30px; background-color: # fff; border: 1px # ebebeb solid; width: 40px; height: 40px; border-radius: 20px;} .login-input-content {margin-top: 20px }. Login-button {width: 100px; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: 1px # ebebeb solid; text-align: center;} a {text-decoration: none; color: # 000 }. Login-button a {display: block;}. Login-input input.list-input {float: left; line-height: 35px; height: 35px; width: 350px; border: 1px # ebebeb solid; text-indent: 5px }. Login-input {overflow: hidden; margin: 0px 0px 20px 0px;} .login-input label {float: left; width: 90px; padding-right: 10px; height: 35px; line-height: 35px; text-align: right; font-size: 14px }. Login-mask {display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba (0,0,0, .3) } Click, pop-up login box, login member, close user name: login password: login member

JS section:

/ / 1. Get the element var login = document.querySelector ('.login'); var mask = document.querySelector ('.login); var loginHeader = document.querySelector (' .login-header'); var closeBtn = document.querySelector ('.login); var loginTitle = document.querySelector (' .login); / / 2. Click the login prompt to display login and mask; loginHeader.addEventListener ('click', function () {login.style.display =' block'; mask.style.display = 'block';}) / / 3. Click the close button to hide login and mask; closeBtn.addEventListener ('click', function () {login.style.display =' none'; mask.style.display = 'none';}) / / 4. Drag the login box / / 4.1Mouse press to get the coordinates of the mouse in the box loginTitle.addEventListener ('mousedown', function (e) {var x = e.pageXMurlogin.offsetLeft; var y = e.pageY-login.offsetTop / / 4.2 when the mouse moves, subtract the coordinates of the mouse in the page from the coordinates of the mouse in the box to get the left and top values of the login box document.addEventListener ('mousemove', move) function move (event) {login.style.left = event.pageX-x +' px'; login.style.top = event.pageY-y + 'px' Remove the mobile event document.addEventListener ('mouseup', function () {document.removeEventListener (' mousemove', move)})} when the mouse is released

Demonstration of the effect:

Train of thought:

Add a click event to the draggable part, calculate the mouse coordinates in the draggable part (e.pageX-box.offsetLeft) when triggered, get x y, and then add a mouse movement event to the document, because when the mouse drags the modal box, it moves within the entire DOM window. Keep the relative position of the mouse and the mode box unchanged, so you need to calculate the position of the mode box (e.pageX-x) at this time, and then modify the position of the mode box. When the mouse pops up, clear the move event.

This is the end of the article on "how to realize the draggable modal box in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.