<div class="login-header">
?? ??? ??? ?<a href="javascript:;" id="link">
?? ??? ??? ??? ?點擊,彈出登錄框
?? ??? ??? ?</a>
?? ??? ?</div>
?? ??? ?<div id="login" class="login">
?? ??? ??? ?<div id="title" class="login-title">登錄會員
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?<a href="javascript:void(0);" id="closeBtn">
?? ??? ??? ??? ??? ??? ?關(guān)閉
?? ??? ??? ??? ??? ?</a>
?? ??? ??? ??? ?</span>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="login-input-content">
?? ??? ??? ??? ?<div class="login-input">
?? ??? ??? ??? ??? ?<label>用戶名:</label>
?? ??? ??? ??? ??? ?<input type="text" name="info[name]" id="username" placeholder="請輸入用戶名" />
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="login-input">
?? ??? ??? ??? ??? ?<label>登錄密碼</label>
?? ??? ??? ??? ??? ?<input type="password" name="info[password]" id="password" placeholder="請輸入登錄密碼" />
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ??? ?<div id="loginBtn" class="login-button">
?? ??? ??? ??? ?<a href="javascript:void(0)" id="login-button-submit"></a>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?<!-- 遮蓋層 -->
?? ??? ?<div id="bg" class="login-bg">
?
</div>

.login-header>a {
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?top: 20px;
?? ??? ??? ??? ?left: 40%;
?? ??? ??? ??? ?font-size: 30px;
?
?? ??? ??? ?}
?
?? ??? ??? ?.login {
?? ??? ??? ??? ?display: none;
?? ??? ??? ??? ?width: 512px;
?? ??? ??? ??? ?height: 280px;
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?border: 1px solid #EBEBEB;
?? ??? ??? ??? ?left: 50%;
?? ??? ??? ??? ?top: 50%;
?? ??? ??? ??? ?background-color: #fff;
?? ??? ??? ??? ?box-shadow: 0 0 20px #ddd;
?? ??? ??? ??? ?z-index: 999;
?? ??? ??? ??? ?transform: translate(-50%, -50%);
?? ??? ??? ?}
?
?? ??? ??? ?.login-title {
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?margin: 10px 0 0 0;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ??? ?height: 40px;
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?cursor: move;
?? ??? ??? ?}
?
?? ??? ??? ?.login-input-content {
?? ??? ??? ??? ?margin-top: 20px;
?? ??? ??? ?}
?
?? ??? ??? ?.login-button {
?? ??? ??? ??? ?width: 50%;
?? ??? ??? ??? ?margin: 30px auto 0 auto;
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ??? ?font-size: 14px;
?? ??? ??? ??? ?border: 1px solid #EBEBEB;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?
?? ??? ??? ?.login-bg {
?? ??? ??? ??? ?display: none;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 100%;
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ??? ?left: 0;
?? ??? ??? ??? ?background: rgba(0, 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;
?? ??? ??? ??? ?width: 350px;
?? ??? ??? ??? ?border: 1px solid #EBEBEB;
?? ??? ??? ??? ?text-indent: 5px;
?? ??? ??? ?}
?
?? ??? ??? ?.login-input {
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ??? ?margin: 0 0 20px 40px;
?? ??? ??? ?}
?
?? ??? ??? ?.login-input label {
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 90px;
?? ??? ??? ??? ?padding-right: 10px;
?? ??? ??? ??? ?line-height: 35px;
?? ??? ??? ??? ?height: 35px;
?? ??? ??? ??? ?font-size: 14px
?? ??? ??? ?}
?
?? ??? ??? ?.login-title span {
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?font-size: 12px;
?? ??? ??? ??? ?right: -10px;
?? ??? ??? ??? ?top: -30px;
?? ??? ??? ??? ?background-color: #fff;
?? ??? ??? ??? ?border: 1px solid #ebebeb;
?? ??? ??? ??? ?width: 40px;
?? ??? ??? ??? ?height: 40px;
?? ??? ??? ??? ?border-radius: 20px;
?? ??? ??? ?}

//1.獲取元素
var login = document.querySelector('.login');
//遮蓋層
var mark = document.querySelector('.login-bg');
// 顯示按鈕
var link = document.querySelector('#link');
//關(guān)閉按鈕
var closeBtn = document.querySelector('#closeBtn');
//在title區(qū)域按下鼠標(biāo)才可以拖動
var title = document.querySelector('#title')
?
// 2.點擊彈出層這個鏈接link ?讓mark 和login 顯示出來?? ?
link.addEventListener('click', function() {
?? ??? ??? ?mark.style.display = 'block'
?? ??? ??? ?login.style.display = 'block'
?? ??? ?})
?
?? ??? ?// 3.點擊彈出層這個關(guān)閉按鈕closeBtn ?讓mark 和login 隱藏起來
?? ??? ?closeBtn.addEventListener('click', function() {
?? ??? ??? ?mark.style.display = 'none'
?? ??? ??? ?login.style.display = 'none'
?? ??? ?})
?
?
?? ??? ?// 4.開始拖拽
?? ??? ?//(1)當(dāng)鼠標(biāo)按下,就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
?? ??? ?title.addEventListener('mousedown', function(e) {
?? ??? ??? ?var x = e.pageX - login.offsetLeft;
?? ??? ??? ?var y = e.pageY - login.offsetTop;
?
?? ??? ??? ?// (2)鼠標(biāo)移動的時候，把鼠標(biāo)在頁面中的坐標(biāo) 減去 鼠標(biāo)在盒子中的坐標(biāo)就是模態(tài)框的left和top值 注意移動事件寫到按下事件里面。
?? ??? ??? ?document.addEventListener('mousemove', move)
?
?? ??? ??? ?function move(e) {
?
?? ??? ??? ??? ?login.style.left = e.pageX - x + 'px'
?? ??? ??? ??? ?login.style.top = e.pageY - y + 'px'
?
?? ??? ??? ?}
?? ??? ??? ?// (3)鼠標(biāo)彈起,就讓鼠標(biāo)事件移除
?? ??? ??? ?document.addEventListener('mouseup', function(e) {
?? ??? ??? ??? ??? ?document.removeEventListener('mousemove', move)
?? ??? ??? ?})
?? ??? ?})