JavaScript+CSS實現(xiàn)模態(tài)框效果
更新時間：2022年07月04日 09:59:26 作者：weixin_44607194
這篇文章主要為大家詳細介紹了JavaScript+CSS實現(xiàn)模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript+CSS實現(xiàn)模態(tài)框效果的具體代碼，供大家參考，具體內(nèi)容如下
發(fā)現(xiàn)的問題
1）鼠標按下后拖動的瞬間，光標會脫離模態(tài)盒子跑到外面
2）鼠標彈起事件不起作用
解決的思路
首先是因為代碼里有用到offsetLeft和offsetTop這兩個屬性，所以考慮是不是模態(tài)框的定位出現(xiàn)了問題 。
又：設置關閉標簽設置了絕對定位，那么loginBox作為其父級元素我將其設置為相對定位。
各個類型定位的介紹：
1.靜態(tài)定位: position: static 默認,也就是文檔流定位,元素的顯示位置與源碼順序一致（不是定位元素）
2.相對定位: position: relative;相對于該元素在文檔流中的原始位置進行偏移
3.絕對定位: position: absolue;相對于它的祖先中離它最近的”定位元素”的位置發(fā)生偏移（如果祖先元素中不存在定位元素,它就參考根元素(html)進行定位）
4.固定定位: position: fixed; 是絕對定位的一個特例,它始終相對于html定位
定位元素：只要這個元素中有position: relative;或者 position:absolute;就稱為定位元素
由上可看出，相對定位，指的是相對于該元素在文檔流中的原始位置進行偏移而不是相對于html，所以loginBox不能設置為相對定位?？梢杂媒^對定位或固定定位，兩者均可。
另外，需要注意使用top、left定位后，則margin-top、margin-left產(chǎn)生同方向相加的位移效果，margin-bottom、margin-righ產(chǎn)生無任何效果的margin空間。所以保留margin: 100px auto;時效果還是會有些奇怪，注釋起來了就好了。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ??
? ? ? ? body {
? ? ? ? ? ? background-color: white;
? ? ? ? }
? ? ? ??
? ? ? ? .dianji {
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? margin: 10px auto;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? /* margin: 100px auto; */
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? width: 370px;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox>span {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: -15px;
? ? ? ? ? ? right: -15px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? font-size: 8px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? border: 1px solid #cccccc;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox h5 {
? ? ? ? ? ? /* position: relative; */
? ? ? ? ? ? margin-bottom: 18px;
? ? ? ? ? ? font-weight: normal;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? cursor: move;
? ? ? ? }
? ? ? ??
? ? ? ? .uname {
? ? ? ? ? ? margin: 18px 0 15px 15px;
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? line-height: 25px;
? ? ? ? }
? ? ? ??
? ? ? ? .uname span,
? ? ? ? .psw span {
? ? ? ? ? ? font-size: 12px;
? ? ? ? }
? ? ? ??
? ? ? ? .uname input,
? ? ? ? .psw input {
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? width: 230px;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox button {
? ? ? ? ? ? margin: 20px;
? ? ? ? ? ? width: 190px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border: 1px solid #cccccc;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="dianji">點擊，彈出登錄框</div>
? ? <div class="loginBox">
? ? ? ? <span class="close">關閉</span>
? ? ? ? <h5>登錄會員</h5>
? ? ? ? <div class="uname"><span>用戶名：</span> <input type="text" placeholder="請輸入用戶名"></div>
? ? ? ? <div class="psw"><span>登錄密碼：</span> <input type="password" placeholder="請輸入密碼"></div>
? ? ? ? <button>登錄</button>
? ? </div>
? ? <script>
? ? ? ? var dianji = document.querySelector('.dianji');
? ? ? ? var loginBox = document.querySelector('.loginBox');
? ? ? ? var close = document.querySelector('.close');
? ? ? ? var bodyy = document.body;
? ? ? ? var move_area = document.querySelector('h5');
? ? ? ? dianji.addEventListener('click', function() {
? ? ? ? ? ? bodyy.style.backgroundColor = '#ccc';
? ? ? ? ? ? loginBox.style.display = 'block';
? ? ? ? })
? ? ? ? close.addEventListener('click', function() {
? ? ? ? ? ? bodyy.style.backgroundColor = 'white';
? ? ? ? ? ? loginBox.style.display = 'none';
? ? ? ? })
? ? ? ? move_area.addEventListener('mousedown', function(e) {
? ? ? ? ? ? var x = e.pageX - loginBox.offsetLeft;
? ? ? ? ? ? var y = e.pageY - loginBox.offsetTop;
? ? ? ? ? ? console.log('x=' + x + ' ?y=' + y);
? ? ? ? ? ? document.addEventListener('mousemove', move)
? ? ? ? ? ? function move(e) {
? ? ? ? ? ? ? ? loginBox.style.left = e.pageX - x + 'px';
? ? ? ? ? ? ? ? loginBox.style.top = e.pageY - y + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? //鼠標彈起，就是讓鼠標移動時間解除
? ? ? ? ? ? document.addEventListener('mouseup', function() {
? ? ? ? ? ? ? ? document.removeEventListener('mousemove', move);
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
</body>
</html>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于JS實現(xiàn)導航條之調(diào)用網(wǎng)頁助手小精靈的方法
在網(wǎng)站中加入網(wǎng)頁助手小精靈，當用戶訪問網(wǎng)站時，向用戶問好，或是傳遞一些網(wǎng)站的重要信息，給用戶帶來極好的體驗感，那么基于js代碼是如何調(diào)用網(wǎng)頁助手小精靈的呢？下面跟著腳本之家小編一起學習吧2016-06-06
這篇文章主要介紹了JS實現(xiàn)的仿淘寶交易倒計時效果,涉及JavaScript針對時間與日期的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了js異步上傳多張圖片插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
下面小編就為大家?guī)硪黄狫avascript實現(xiàn)跑馬燈效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
教你巧用?import.meta?實現(xiàn)熱更新的問題
import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象，它包含了這個模塊的信息，這篇文章主要介紹了巧用?import.meta?實現(xiàn)熱更新的問題,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了ES6實現(xiàn)圖片切換特效代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
js實現(xiàn)的GridView即表頭固定表體有滾動條且可滾動
實現(xiàn)GridView，表頭固定，表體有滾動條且可滾動，下面有個不錯的示例，希望對大家有所幫助2014-02-02
當input元素還未插入文檔流之前，是可以修改它的值的，在ie和ff下都沒問題。但如果input已經(jīng)存在于頁面，其type屬性在ie下就成了只讀屬性了，不可以修改2013-10-10
導致這個問題產(chǎn)生的原因，一般是因為js（一個比較復雜的js）寫在body里面，在body元素加載完之前調(diào)用出現(xiàn)問題。顯然，解決該問題的方法就是將這一段js放在body元素解析完畢之后。2010-11-11
這篇文章主要介紹了小程序登錄態(tài)管理的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11