二十一天——打卡第十五天（JavaScript实现登录弹出框）

Posted 2021-12-07 空白407

今天写个点击出现弹出框的效果。

html：

<h2>点击，弹出对话框</h2>
		<div id="login">
			<h3>登录会员</h3>
			<div class="yonghuming"><span>用户名：</span><input type="text" name=""  value=""
					placeholder="请输入用户名" /></div>
			<div class="mima"><span>登录密码：</span><input type="password" name=""  value="" placeholder="请输入密码" />
			</div>
			<button type="button">登录会员</button>
			<div class="close">关闭</div>
		</div>
		
		<div class="cover"></div>

 CSS：

* {
                margin: 0;
                padding: 0;
            }

            input {
                outline: none;
            }

            h2 {
                position: absolute;
                top: 20px;
                left: 50%;
                text-align: center;
                z-index: 10;
                transform: translateX(-50%);
            }

            h2:hover {
                cursor: pointer;
            }

            #login {
                position: absolute;
                top: 45%;
                left: 50%;
                border: 1px solid #C7C7C7;
                width: 400px;
                height: 200px;
                background-color: white;
                transform: translate(-50%, -50%);
                z-index: 10;
                display: none;
            }

            #login h3 {
                margin-top: 10px;
                text-align: center;
            }
            #login h3:hover {
                cursor: move;
            }
            .yonghuming>span,
            .mima>span {
                display: inline-block;
                width: 80px;
                text-align: right;
                margin: 10px 20px 0;
                //border: 1px solid red;
            }

            #login input {
                height: 30px;
                width: 250px;
                border: 1px #c7c7c7 solid;
                margin-top: 20px;
            }

            #login button {
                display: block;
                width: 180px;
                height: 30px;
                margin: 20px auto;
            }
            .close {
                position: absolute;
                top: 0;
                right: 0;
                background-color: white;
                font-size: 10px;
                line-height: 30px;
                width: 30px;
                height: 30px;
                text-align: center;
                cursor: pointer;
                transform: translate(50%,-50%);
                border-radius: 50%;
                z-index: 10;
            }
            .cover {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: black;
                opacity: 0.5;
                display: none;
            }

 javascript：

var link=document.querySelector('h2');
			var cover=document.querySelector('.cover');
			var login=document.querySelector('#login');
			var close=document.querySelector('.close');
			var dragn=document.querySelector('#login').querySelector('h3');
			link.addEventListener('click',function(){
				login.style.display='block';
				cover.style.display='block';
			});
			close.addEventListener('click',function(){
				login.style.display='none';
				cover.style.display='none';
			});
			dragn.addEventListener('mousedown',function(e){
				var x=e.pageX-login.offsetLeft;
				var y=e.pageY-login.offsetTop;
				document.addEventListener('mousemove',move);
				function move(e){
					login.style.left=e.pageX-x+'px';
					login.style.top=e.pageY-y+'px';
				};
				document.addEventListener('mouseup',function(){
					document.removeEventListener('mousemove',move);
				}); 
			});