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

This article mainly introduces "how to achieve modal box drag effect with JavaScript". In daily operation, I believe many people have doubts about how to achieve modal box drag effect with JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve modal box drag effect with JavaScript". Next, please follow the editor to study!

Make a case of dragging a modal box here, and the functions to be implemented here are:

1. Clicking on the pop-up layer pops up a modal box and displays a gray translucent occlusion layer.

two。 Click the close button to close the mode box and close the gray translucent occlusion layer at the same time.

3. Mouse over the top line of the modal box, you can hold down the mouse to drag the modal box to move in the page.

4. Release the mouse to stop dragging the modal box.

The realization idea is as follows:

Click on the pop-up layer, and the mode box and occlusion layer will display display:block.

Click the close button, and the mode box and occlusion layer will be hidden display:none

The principle of dragging on the page: press and move the mouse, and then release the mouse.

The trigger event is when the mouse presses the mousedown and the mouse moves the mousemove mouse to release the mouseup.

Drag and drop process: during the mouse movement, get the latest values assigned to the left and top values of the modal box, so that the modal box can follow the mouse.

The event source triggered by mouse press is the top line, that is, login member.

The coordinates of the mouse minus the coordinates of the mouse in the box is the real location of the modal box.

Press the mouse, we want to get the coordinates of the mouse in the box.

Mouse movement, so that the coordinates of the modal box is set to: mouse coordinates minus box coordinates, pay attention to the movement event written to the press event inside.

When the mouse is released, the drag is stopped, that is, the mouse movement event is released.

The implementation code is:

.login-header {width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px } ul, li, ol, dl, dt, dd, div, p, span, H2, h3, h4, h5, h6, H7, a {padding: 0px; margin: 0px Login {display: none; width: 512px; height: 280px; position: fixed; border: # ebebeb solid 1px; left: 50%; top: 50%; background: # ffffff; box-shadow: 0px 0px 20px # ddd; z-index: 9999 Transform: translate (- 50%,-50%);}. Login-title {width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move Login-input-content {margin-top: 20px;} .login-button {width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: # ebebeb 1px solid; text-align: center }. Login-bg {display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba (0,0,0, .3);} a {text-decoration: none Color: # 0000000;}. Login-button a {display: block;}. Login-input input.list-input {float: left; line-height: 35px; height: 35px; width: 350px; border: # ebebeb 1px solid; text-indent: 5px }. Login-input {overflow: hidden; margin: 0px 0px 20px 0px;} .login-input label {float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px Font-size: 14px;}. Login-title span {position: absolute; font-size: 12px; right:-20px; top:-30px; background: # ffffff; border: # ebebeb solid 1px; width: 40px; height: 40px Border-radius: 20px } Click Pop-up login box login member off user name: login password: login member / / 1. Get the element var login = document.querySelector ('.login'); var mask = document.querySelector ('. Login-bg'); var link = document.querySelector ('# link'); var closeBtn = document.querySelector ('# closeBtn'); var title = document.querySelector ('# title'); / / 2. Click the pop-up layer link link to make mask and login display link.addEventListener ('click', function () {mask.style.display =' block'; login.style.display = 'block';}) / / 3. Click closeBtn to hide mask and login closeBtn.addEventListener ('click', function () {mask.style.display =' none'; login.style.display = 'none';}) / / 4. Start dragging / / (1) mouse down to get the title.addEventListener ('mousedown', function (e) {var x = e.pageX-login.offsetLeft; var y = e.pageY-login.offsetTop) of the mouse in the box / / (2) when the mouse moves, the coordinates of the mouse in the page minus the coordinates of the mouse in the box are the left of the modal box and the top value document.addEventListener ('mousemove', move) function move (e) {login.style.left = e.pageX-x +' px'; login.style.top = e.pageY-y + 'px' } / / (3) when the mouse pops up, let the mouse move event remove document.addEventListener ('mouseup', function () {document.removeEventListener (' mousemove', move);})})

The results are as follows:

At this point, the study on "how to achieve the modal box drag effect in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.