First, the case effect
Ii. Case Description
- Clicking on the pop-up layer will bring up the mode box and display the grey translucent occlusion layer.
- Click the Close button to close the mode box and close the grey translucent shielding layer.
- Mouse over the top line of the mode box, you can hold down the mouse drag mode box to move in the page.
- Release the mouse, you can stop dragging the mode box to move.
Case analysis
- Click on the pop-up layer to display the mode box and the occlusion layer. Display :block;
- Click the close button to hide the mode box and the occlusion layer. Display: None;
- Drag and drop across the page: hold down the mouse and move it, then release the mouse
- The triggering event is the mouse press mousedown, the mousemove mousemove and the mouse release mouseup
- Drag and drop process: as the mouse moves, get the latest values assigned to the left and top values of the mode box, so that the mode box can follow the mouse
- The event source triggered by the mouse press is the top line, which is the ID of the title
- The coordinates of the mouse minus the coordinates of the mouse inside the box are the true position of the modal box.
- Mouse down, we want to get the coordinates of the mouse in the box.
- Mouse movement, let the mode box coordinates set to: mouse coordinates minus box coordinates, notice that the movement event is written to the press event.
- Mouse release, stop dragging, is can let the mouse movement event is removed
4. HTML structure
According to the effect of the case, first use HTML to build the structure
<body> <div class="login-header"><a id="link" href="javascript:;" > click, <div id="title" class="login-title"> <span><a id="closeBtn" href="javascript:void(0);" <div class="login-input"> <div class="login-input"> <div class="login-input"> <label > </label> <input type="text" placeholder=" name="info[username]" id="username" class="list-input"> </div Class ="login-content"> <label > </div> <input type="password" placeholder=" name="info[password]" id="password" class="list-input"> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" Id ="login-button-submit"> Submit </a></div> </div> <! - cover layer - > < div id = "bg" class = "login - bg" > < / div > < / body >Copy the codeThe effect is as follows:
5. CSS styles
According to the case effect, use CSS to complete the style design
<style>
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
margin: 200px auto;
}
.login {
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #fff;
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 {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
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: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0 0 20px 0;
}
.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: #fff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
Copy the codeThe effect is as follows:
6. JavaScript interaction
Using JS to achieve interaction
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'); Link.addeventlistener ('click',function(){mask.style.display = 'block'; login.style.display = 'block'; }) / / 3. Click closeBtn hidden mask and login closeBtn. AddEventListener (' click ', function () {mask. Style. The display = 'none'; login.style.display = 'none'; // (1) When we hold down the mouse, Title. AddEventListener (' mouseDown ',function(e){var x = e.proex-login.offsetLeft; var y = e.pageY - login.offsetTop; / / (2) when the mouse moves, the coordinates of the mouse on the page, minus the coordinates of the mouse within the box is a modal dialog document. The left and top value of addEventListener (' mousemove 'move); function move(e){ login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) the mouse is up, Let the mouse events to remove the document. The addEventListener (" mouseup ", function () {document. The removeEventListener (' mousemove 'move); }) }) </script>Copy the codeYou also need to add a line of code in the preceding CSS styles inside the.login and.login-bg :”display: none;”
.login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #fff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%,-50%); }... .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); }Copy the codeCan achieve drag the modal box case
Ref:www.bilibili.com/video/BV1Sy…