기사 주제 학습 다운로드 Q&A 프로그래밍 사전 게임 최근 업데이트

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

집> 웹 프론트엔드> JS 튜토리얼> 본문

js 弹出层并可以拖拽_javascript技巧

WBOY

풀어 주다： 2016-05-16 18:04:51

원래의

832명이 탐색했습니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>弹出层并可拖拽</title> <style> html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;} h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;} h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} </style> <script> window.onload = function () { var oWin = document.getElementById("win"); var oLay = document.getElementById("overlay"); var oBtn = document.getElementsByTagName("button")[0]; var oClose = document.getElementById("close"); var oH2 = oWin.getElementsByTagName("h2")[0]; var bDrag = false; var disX = disY = 0; oBtn.onclick = function () { oLay.style.display = "block"; oWin.style.display = "block" }; oClose.onclick = function () { oLay.style.display = "none"; oWin.style.display = "none" }; oClose.onmousedown = function (event) { (event || window.event).cancelBubble = true; }; oH2.onmousedown = function (event) { var event = event || window.event; bDrag = true; disX = event.clientX - oWin.offsetLeft; disY = event.clientY - oWin.offsetTop; this.setCapture && this.setCapture(); return false }; document.onmousemove = function (event) { if (!bDrag) return; var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oWin.offsetWidth; var maxT = document.documentElement.clientHeight - oWin.offsetHeight; iL = iL < 0 ? 0 : iL; iL = iL > maxL ? maxL : iL; iT = iT < 0 ? 0 : iT; iT = iT > maxT ? maxT : iT; oWin.style.marginTop = oWin.style.marginLeft = 0; oWin.style.left = iL + "px"; oWin.style.top = iT + "px"; return false }; document.onmouseup = window.onblur = oH2.onlosecapture = function () { bDrag = false; oH2.releaseCapture && oH2.releaseCapture(); }; }; </script> <div id="overlay"></div> <div id="win"><h2><span id="close">×</span></h2></div> <center><button>弹出层</button></center>

[Ctrl+A 全选注: 如需引入外部Js需刷新才能执行]

관련 라벨：

弹出层

원천：php.cn

이전 기사：JQuery获取当前屏幕的高度宽度的实现代码_jquery 다음 기사：Jquery进度条插件 Progress Bar小问题解决_jquery

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

미결제약정 하락으로 톤코인 가격 폭락

2024-08-17 03:44:08
기관 투자자들은 2024년 2분기에 현물 비트코인 ETF에 47억 달러를 투자했습니다.

2024-08-17 03:42:08
비트코인(BTC) 채굴주는 8월 초 눈에 띄는 하락세를 보이며 인공 지능(AI)과 관련된 이익을 반납했습니다.

2024-08-17 03:38:08
NYSE와 Nasdaq, SEC 요청 후 비트코인 및 Ether ETF 옵션 규칙 변경 철회

2024-08-17 03:31:08
Nasdaq과 NYSE는 Bitcoin ETF 옵션 제안을 철회했지만 관심은 남아 있습니다.

2024-08-17 03:30:08
바이낸스 선물거래, 새로운 프로모션으로 30,000 USDC 상금 풀 발표

2024-08-17 03:29:08
Tron 생태계, 자체 Meme 토큰 런치패드인 SunPump 출시

2024-08-17 03:28:08
DTX Exchange(DTX)가 Cardano(ADA) 및 Tron(TRX)을 압도합니다.

2024-08-17 03:25:08
MoonTaurus(MNTR)가 Meme 코인 부문의 최고 경쟁자로 부상하여 시장 지배력을 위해 Dogecoin(DOGE)에 도전했습니다.

2024-08-17 03:24:08
Blackrock의 온체인 자산이 상승함에 따라 Grayscale은 치열한 경쟁에 직면해 있습니다.

2024-08-17 03:23:08

최신 이슈

Selenium을 사용하여 WindowHandles를 사용하여 탭과 창을 추적하고 반복하는 가장 좋은 방법 Internet Explorer11의 UI 테스트를 위해 Seleniumwebdriver를 사용하고 있습니다. 테스트된 웹 애플리케이션에서는 여러 화면이 나타납니...

에서 2023-11-04 18:03:14

0

1

199