How to use JavaScript to make pop-up draggable login box
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.
