javascript案例-----拖動模态框

模态框,我們也叫彈出框,可以在網易雲,京東等之類的網頁中看到

效果如下:

代碼思路:

1.         1．點選彈出層，會彈出模态框，并且顯示灰色半透明的遮擋層。
2.         2．點選關閉按鈕，可以關閉模态框，并且同時關閉灰色半透明遮擋層。
3.         3．滑鼠放到模态框最上面一行，可以按住滑鼠拖拽模态框在頁面中移動。
4.         4．滑鼠松開，可以停止拖動模态框移動。
5. 在頁面中拖拽的原理︰滑鼠按下并且移動，之後松開滑鼠
6. 觸發事件是滑鼠按下mousedown，滑鼠移動mousemove滑鼠松開mouseup
7.  拖拽過程:滑鼠移動過程中，獲得最新的值指派給模态框的left和top值，這樣模态框可以跟着滑鼠走了
8. 滑鼠按下觸發的事件源是最上面一行．就是id 為title
9. 滑鼠的坐标減去滑鼠在盒子内的坐标,才是模态框真正的位置。
10. 滑鼠按下，我們要得到滑鼠在盒子的坐标。
11. 滑鼠移動，就讓模态框的坐标設定為︰滑鼠坐标減去盒子坐标即可，注意移動事件寫到按下事件裡面。

代碼步驟:

1.         1.點選彈出層,模态框和遮擋層就會顯示出來 display:block
2.                 1.1點選彈出層這個連結link  讓mark 和login 顯示出來
3.        2. 點選關閉按鈕,模态框和遮擋層就會隐藏出來 display:none
4.                 2.1點選彈出層這個關閉按鈕closeBtn  讓mark 和login 隐藏起來
5.        3.開始拖拽
6.                    1)當滑鼠按下,就獲得滑鼠在盒子内的坐标
7.                       2)滑鼠移動的時候，把滑鼠在頁面中的坐标 減去 滑鼠在盒子中的坐标就是模态框的left和top值 注意移動事件寫到按下事件裡面。
8.                      (3)滑鼠彈起,就讓滑鼠事件移除

具體每一步的步驟也會在代碼中寫出來 

html部分:

<div class="login-header">
			<a href="javascript:;" target="_blank" rel="external nofollow"  id="link">
				點選,彈出登入框
			</a>
		</div>
		<div id="login" class="login">
			<div id="title" class="login-title">登入會員
				<span>
					<a href="javascript:void(0);" target="_blank" rel="external nofollow"  id="closeBtn">
						關閉
					</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)" target="_blank" rel="external nofollow"  id="login-button-submit"></a>
			</div>
		</div>
		<!-- 遮蓋層 -->
		<div id="bg" class="login-bg">

		</div>
           

css部分:

.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;
			}
           

javascript部分:

//1.擷取元素
		var login = document.querySelector('.login');
		//遮蓋層
		var mark = document.querySelector('.login-bg');
		// 顯示按鈕
		var link = document.querySelector('#link');
		//關閉按鈕
		var closeBtn = document.querySelector('#closeBtn');
		//在title區域按下滑鼠才可以拖動
		var title = document.querySelector('#title')

		// 2.點選彈出層這個連結link  讓mark 和login 顯示出來	
		link.addEventListener('click', function() {
			mark.style.display = 'block'
			login.style.display = 'block'
		})

		// 3.點選彈出層這個關閉按鈕closeBtn  讓mark 和login 隐藏起來
		closeBtn.addEventListener('click', function() {
			mark.style.display = 'none'
			login.style.display = 'none'
		})


		// 4.開始拖拽
		//(1)當滑鼠按下,就獲得滑鼠在盒子内的坐标
		title.addEventListener('mousedown', function(e) {
			var x = e.pageX - login.offsetLeft;
			var y = e.pageY - login.offsetTop;

			// (2)滑鼠移動的時候，把滑鼠在頁面中的坐标 減去 滑鼠在盒子中的坐标就是模态框的left和top值 注意移動事件寫到按下事件裡面。
			document.addEventListener('mousemove', move)

			function move(e) {

				login.style.left = e.pageX - x + 'px'
				login.style.top = e.pageY - y + 'px'

			}
			// (3)滑鼠彈起,就讓滑鼠事件移除
			document.addEventListener('mouseup', function(e) {
					document.removeEventListener('mousemove', move)
			})
		})