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

This article mainly introduces how to use JavaScript to do pop-up draggable login box related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use JavaScript to do pop-up draggable login box article will have a harvest, let's take a look.

Generally speaking, it is relatively simple to implement. The old rule is to build the html framework first. The code is as follows:

Click to pop up the login box

Log in as a member

Close

User name:

Login password:

Log in as a member

Css Code:

. login-header {

Width: 100%

Text-align: center

Height: 30px

Font-size: 24px

Line-height: 30px

}

* {

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: # 000000

}

. 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

}

Do you think CSS is the most complicated? .

Finally, there is the js code: here we only let the title part of the box be dragged, that is, the head of the login box.

/ / 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')

/ / create a click event. After clicking link, the login box displays

Link.addEventListener ('click', function () {

Mask.style.display = 'block'

Login.style.display = 'block'

})

/ / when closed, the login box is hidden

CloseBtn.addEventListener ('click', function () {

Mask.style.display = 'none'

Login.style.display = 'none'

})

/ / press the mouse to get the location of the login box

Title.addEventListener ('mousedown', function (e) {

Var x = e.pageX-login.offsetLeft

Var y = e.pageY-login.offsetTop

/ / move the mouse to trigger the mobile event

Document.addEventListener ('mousemove', move)

Function move (e) {

Login.style.left = e.pageX-x + 'px'

Login.style.top = e.pageY-y + 'px'

}

/ / Mouse up to destroy mouse movement event

Document.addEventListener ('mouseup', function () {

Document.removeEventListener ('mousemove', move)

})

})

This is the end of the article on "how to use JavaScript to make a pop-up draggable login box". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use JavaScript to do pop-up draggable login box". If you still want to learn more knowledge, welcome to follow the industry information channel.

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.