JS는 드래그 가능하고 닫을 수 있는 팝업 창 효과를 구현합니다.
이 기사의 예에서는 JS를 사용하여 드래그 및 닫기 가능한 팝업 창 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이 예제를 실행하고 텍스트를 클릭하면 창이 팝업됩니다. 이는 실제로 팝업 레이어입니다. 이 팝업 레이어는 마우스로 드래그할 수도 있습니다. 팝업 텍스트 레이어와 팝업 그림 레이어를 원하는 대로 선택하여 사용하세요.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-draw-close-able-alert-dlg-demo/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出层、弹窗效果+拖曳功能 </title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;}
.botton{ color:#F00; cursor:pointer;}
.mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff}
#cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;}
#cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;}
#cwxCn{ background:#FFF; display:block;}
.imgd{ width:400px; height:300px;}
</style>
</head>
<body>
<!--弹出窗-->
<div class="mybody">
<div class="botton" id="testClick">点击测试</div>
asdasdasdasdasdasdasd<br/>这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div>
</div>
<script type="text/javascript">
C$('testClick').onclick = function(){
var neirong = '<div><img src="http://www.jb51.net/images/logo.gif" class="imgd" /></div>';
cwxbox.box.show(neirong);
}
C$('testClick1').onclick = function(){
var neirong = '123456789132456789';
cwxbox.box.show(neirong,3);
}
function C$(id){return document.getElementById(id);}
//定义窗体对象
var cwxbox = {};
cwxbox.box = function(){
var bg,wd,cn,ow,oh,o = true,time = null;
return {
show:function(c,t,w,h){
if(o){
bg = document.createElement('div'); bg.id = 'cwxBg';
wd = document.createElement('div'); wd.id = 'cwxWd';
cn = document.createElement('div'); cn.id = 'cwxCn';
document.body.appendChild(bg);
document.body.appendChild(wd);
wd.appendChild(cn);
bg.onclick = cwxbox.box.hide;
window.onresize = this.init;
window.onscroll = this.scrolls;
o = false;
}
if(w && h){
var inhtml = '<iframe src="'+ c +'" width="'+ w +'" height="'+ h +'" frameborder="0"></iframe>';
}else{
var inhtml = c;
}
cn.innerHTML = inhtml;
oh = this.getCss(wd,'offsetHeight');
ow = this.getCss(wd,'offsetWidth');
this.init();
this.alpha(bg,50,1);
this.drag(wd);
if(t){
time = setTimeout(function(){cwxbox.box.hide()},t*1000);
}
},
hide:function(){
cwxbox.box.alpha(wd,0,-1);
clearTimeout(time);
},
init:function(){
bg.style.height = cwxbox.page.total(1)+'px';
bg.style.width = '';
bg.style.width = cwxbox.page.total(0)+'px';
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
wd.style.left=(cwxbox.page.width() - ow)/2+'px';
},
scrolls:function(){
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
},
alpha:function(e,a,d){
clearInterval(e.ai);
if(d==1){
e.style.opacity=0;
e.style.filter='alpha(opacity=0)';
e.style.display = 'block';
}
e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40);
},
ta:function(e,a,d){
var anum = Math.round(e.style.opacity*100);
if(anum == a){
clearInterval(e.ai);
if(d == -1){
e.style.display = 'none';
if(e == wd){
this.alpha(bg,0,-1);
}
}else{
if(e == bg){
this.alpha(wd,100,1);
}
}
}else{
var n = Math.ceil((anum+((a-anum)*.5)));
n = n == 1 ? 0 : n;
e.style.opacity=n/100;
e.style.filter='alpha(opacity='+n+')';
}
},
getCss:function(e,n){
var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e,null);
if(e_style.display === 'none'){
var clonDom = e.cloneNode(true);
clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
document.body.appendChild(clonDom);
var wh = clonDom[n];
clonDom.parentNode.removeChild(clonDom);
return wh;
}
return e[n];
},
drag:function(e){
var startX,startY,mouse;
mouse = {
mouseup:function(){
if(e.releaseCapture)
{
e.onmousemove=null;
e.onmouseup=null;
e.releaseCapture();
}else{
document.removeEventListener("mousemove",mouse.mousemove,true);
document.removeEventListener("mouseup",mouse.mouseup,true);
}
},
mousemove:function(ev){
var oEvent = ev||event;
e.style.left = oEvent.clientX - startX + "px";
e.style.top = oEvent.clientY - startY + "px";
}
}
e.onmousedown = function(ev){
var oEvent = ev||event;
startX = oEvent.clientX - this.offsetLeft;
startY = oEvent.clientY - this.offsetTop;
if(e.setCapture)
{
e.onmousemove= mouse.mousemove;
e.onmouseup= mouse.mouseup;
e.setCapture();
}else{
document.addEventListener("mousemove",mouse.mousemove,true);
document.addEventListener("mouseup",mouse.mouseup,true);
}
}
}
}
}()
cwxbox.page = function(){
return{
top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
total:function(d){
var b=document.body, e=document.documentElement;
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
}
}
}()
</script>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7338
9
1627
14
1352
46
1265
25
1210
29
360 브라우저에서 권장하는 광고를 끄는 방법은 무엇입니까? PC에서 360 브라우저가 권장하는 광고를 끄는 방법은 무엇입니까?
Mar 14, 2024 am 09:16 AM
360 브라우저에서 권장하는 광고를 끄는 방법은 무엇입니까? 많은 사용자들이 360 브라우저를 사용하고 있다고 생각합니다. 그러나 이 브라우저는 때때로 광고가 표시되어 많은 사용자들을 매우 고민하게 만듭니다. 이 사이트에서는 컴퓨터에서 360 브라우저에서 권장하는 광고를 끄는 방법을 사용자에게 주의 깊게 소개하겠습니다. 컴퓨터에서 360 브라우저가 권장하는 광고를 끄는 방법은 무엇입니까? 방법 1: 1. 360 안전 브라우저를 엽니다. 2. 오른쪽 상단에 있는 "세 개의 가로 막대" 로고를 찾아 [설정]을 클릭하세요. 3. 팝업 인터페이스 왼쪽 작업 표시줄에서 [실험실]을 찾아 ["360 핫스팟 정보" 기능 활성화]를 선택합니다. 방법 2: 1. 먼저 두 번 클릭합니다.
Win10에서 캘린더 이벤트에 대한 팝업 알림이 없으면 어떻게 해야 합니까? Win10에서 캘린더 이벤트 알림이 사라진 경우 어떻게 복구할 수 있습니까?
Jun 09, 2024 pm 02:52 PM
캘린더는 사용자가 일정을 기록하고 미리 알림을 설정하는 데 도움이 될 수 있습니다. 그러나 많은 사용자가 Windows 10에서 캘린더 이벤트 미리 알림이 팝업되지 않으면 어떻게 해야 하는지 묻고 있습니다. 사용자는 먼저 Windows 업데이트 상태를 확인하거나 Windows App Store 캐시를 지워 작업을 수행할 수 있습니다. 이 사이트에서는 Win10 캘린더 이벤트 알림이 표시되지 않는 문제에 대한 분석을 사용자에게 주의 깊게 소개합니다. 캘린더 이벤트를 추가하려면 시스템 메뉴에서 "캘린더" 프로그램을 클릭하세요. 달력의 날짜를 마우스 왼쪽 버튼으로 클릭하세요. 편집창에 이벤트 이름과 알림 시간을 입력하고 '저장' 버튼을 클릭하면 이벤트가 추가됩니다. win10 캘린더 이벤트 알림이 팝업되지 않는 문제 해결
Sina News Express를 끄는 방법 Express 기능을 끄는 방법은 무엇입니까?
Mar 12, 2024 pm 09:46 PM
Sina News 소프트웨어는 기본적으로 공식 플랫폼에서 제공하는 많은 뉴스 헤드라인 정보를 제공합니다. 각 뉴스 기사의 내용은 정통합니다. 한 번의 클릭으로 위아래로 스와이프하여 검색하고 탐색할 수 있어 전반적인 독서 분위기가 더욱 편안해집니다. . 온라인으로 로그인하려면 휴대폰 번호를 입력하세요. 다양한 분야의 뉴스 채널이 열려 있습니다. 24시간 업데이트가 반복되지 않습니다. 국내, 해외, 지역 시사 뉴스를 한 번의 클릭으로 선택하세요. 뉴스 내용은 모두 관심이 있으시면 뉴스 익스프레스 기능을 꺼두셔도 됩니다. 언제든지 열어서 방대한 인기 뉴스 헤드라인을 미리 보실 수 있습니다. Sina News 사용자에게 온라인으로 빠른 배송 기능의 작동 단계에 대한 세부 정보를 제공합니다. 시나뉴스를 찾아 오른쪽 하단을 클릭하세요.
Windows 11에서 보안 센터를 끄는 방법
Mar 28, 2024 am 10:21 AM
Windows 11은 Microsoft가 출시한 최신 운영 체제 버전입니다. 이전 버전에 비해 Windows 11의 중요한 기능 중 하나는 보안 센터입니다. Security Center는 사용자가 시스템의 보안 상태를 관리하고 모니터링하여 시스템이 맬웨어 및 기타 보안 위협으로부터 보호되도록 도와줍니다. Security Center는 시스템 보안을 보호하는 데 중요하지만, 때때로 사용자는 개인적인 필요나 기타 이유로 Security Center를 끄고 싶을 수도 있습니다. 이번 글에서는 W 사용법을 소개하겠습니다.
Windows 11 보안 센터를 끄는 방법에 대한 자세한 설명
Mar 27, 2024 pm 03:27 PM
Windows 11 운영 체제에서 보안 센터는 사용자가 시스템 보안 상태를 모니터링하고 악성 코드로부터 보호하며 개인 정보를 보호하는 데 도움을 주는 중요한 기능입니다. 그러나 때로는 사용자가 특정 소프트웨어를 설치하거나 시스템 튜닝을 수행하는 경우와 같이 Security Center를 일시적으로 꺼야 할 수도 있습니다. 이 글에서는 시스템을 올바르고 안전하게 운영하기 위해 Windows 11 보안 센터를 끄는 방법을 자세히 소개합니다. 1. Windows 11 보안 센터를 끄는 방법 Windows 11에서는 보안 센터를 꺼도 작동하지 않습니다.
Kuaishou에서 비밀번호 없이 결제를 종료하는 방법 Kuaishou 비밀번호 없이 결제를 종료하는 방법에 대한 튜토리얼
Mar 23, 2024 pm 09:21 PM
Kuaishou는 뛰어난 비디오 플레이어입니다. Kuaishou의 비밀번호 없는 결제 기능은 일상생활에서, 특히 플랫폼에서 필요한 상품을 구매할 때 큰 도움이 될 수 있습니다. 이제 취소를 해야 하는데 어떻게 취소할 수 있나요? 비밀번호 없이 결제를 취소하는 방법은 매우 간단합니다. 이 사이트의 전체 가이드를 함께 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다. Kuaishou에서 비밀번호 없는 결제를 종료하는 방법에 대한 튜토리얼 1. Kuaishou 앱을 열고 왼쪽 상단에 있는 세 개의 수평선을 클릭합니다. 2. Kuaishou 스토어를 클릭하세요. 3. 위 옵션바에서 비밀번호 없는 결제를 찾아 클릭해주세요. 4. 지원하려면 클릭하세요.
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
TikTok 비공개 메시지의 상대방이 비공개 메시지 모드를 끈 경우 어떻게 비공개 메시지 모드를 켤 수 있나요? 내가 비공개 메시지를 보내는 사람이 비공개 메시지 모드를 껐는지 확인할 수 있나요?
Mar 28, 2024 am 08:01 AM
Douyin은 사용자가 간단하게 자신의 삶을 기록하고 행복을 공유할 수 있는 인기 있는 짧은 비디오 소셜 플랫폼입니다. 비공개 메시징 기능은 Douyin에서 중요한 역할을 하며 사용자가 서로 상호 작용하는 주요 방법 중 하나입니다. 때로는 상대방이 비공개 메시지 모드를 꺼서 메시지를 보낼 수 없는 상황이 발생할 수 있습니다. 1. TikTok 비공개 메시지의 상대방이 비공개 메시지 모드를 끈 경우 비공개 메시지 모드를 어떻게 켜나요? 1. 상대방이 개인 정보 설정을 활성화했는지 확인하려면 먼저 상대방이 개인 메시지 수신을 제한했을 수 있는 개인 정보 설정을 활성화했는지 확인해야 합니다. 지인의 비공개 메시지만 허용하도록 설정되어 있는 경우, 서로 친구를 사귀거나 소셜 미디어 플랫폼을 통해 교류하는 등 다른 수단을 통해 연락을 시도할 수 있습니다. 2. 상대방이 개인 정보 보호 설정을 활성화하지 않은 경우 친구 요청을 보냅니다.
