Html
    Css
    Js

    
                        
#bg {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#333;
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
a {
	text-decoration:none;
}
.login-header {
	margin:0 auto;
	text-align:center;
}
#link {
	color:#000;
	line-height:40px;
	font-size:24px;
}
.login {
	display:none;
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	margin:50px auto;
	width:500px;
	height:200px;
	box-shadow:0px 0px 20px #fff;
	background-color:#fff;
}
.login-title {
	text-align:center;
	margin-bottom:30px;
	padding-top:10px;
}
.login-title a {
	position:absolute;
	top:-15px;
	right:-15px;
	color:#000;
	font-size:10px;
	width:30px;
	height:30px;
	border-radius:15px;
	text-align:center;
	line-height:30px;
	box-shadow:0px 0px 20px #fff;
	background-color:#fff;
}
.login-input {
	height:40px;
	line-height:40px;
	margin-bottom:20px;
}
.login-input label {
	display:inline-block;
	margin-left:20px;
	height:40px;
	width:70px;
	text-align:right;
	font-size:14px;
}
.login-input input {
	width:300px;
	height:40px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js拖动模态框(原创)

更新时间:2021-12-03 00:57:28

这是通过原生代码,不需要借助外部插件,就可以实现和微信登录弹窗一样可以通过鼠标拖动的盒子

1
      花开莫与流年错1
      2022/2/28 8:36:50
      模态框在移动的时候,可以做一下限制,如:不能移除可视区域;而且在鼠标点击后移动时,有bug,非必现。 回复