이 기사의 예에서는 JS CSS를 사용하여 드래그 가능한 팝업 프롬프트 상자를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. JS CSS로 만든 드래그 가능한 팝업 프롬프트 상자 <br> a{ 색상:#000; 글꼴 크기:12px 텍스트 장식:없음}<br> a:hover{ 색상:#900; 텍스트 장식:밑줄}<br> body{배경:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366) 오버플로:hidden}<br> #massage_box{ 위치:절대; 왼쪽:표현식((body.clientHeight-200)/2); 높이:200px; =#666666,offx=3,offy=3,긍정적=2); z-색인:2; 숨김}<br> #mask{ 위치:절대값:0; 왼쪽:표현식(body.scrollWidth);높이:표현식(body.scrollHeight); 필터:ALPHA(불투명도=60); :1; 공개 여부:숨김}<br> .massage{테두리:#036 테두리 너비:1 1 3 1; 너비:95%; 색상:#036; }<br> .header{배경:#036; 높이:10%; 글꼴 계열:Verdana, Arial, Helvetica, sans-serif; 글꼴 크기:12px; 색상:#fff}<br> </스타일><br> <!--레이어 이동 구현--><br> <스크립트 언어="javascript"><br> var Obj=''<br> document.onmouseup=MUp<br> document.onmousemove=M이동<br> 함수 MDown(객체){<br> Obj=Object.id<br> document.all(Obj).setCapture()<br> pX=event.x-document.all(Obj).style.pixelLeft;<br> pY=event.y-document.all(Obj).style.pixelTop;<br> } <p>MMove() 함수{<br> if(Obj!=''){<br> document.all(Obj).style.left=event.x-pX;<br> document.all(Obj).style.top=event.y-pY;<br> }<br> }</p> <p>함수 MUp(){<br> if(Obj!=''){<br> document.all(Obj).releaseCapture();<br> Obj='';<br> }<br> }<br> <br> </p> <br> <div id="massage_box"><div class="massage"><br> <div class="header" onmousedown=MDown(massage_box)><br> <span onClick="massage_box.style.visibility='hidden'; 마스크.style.visibility='hidden'" style="float:right; 디스플레이:inline; 커서:손">×</span>< ;/div><br> </div> <br> <div id="mask"></div><br> <span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#"><font size= 18px>이 팁을 클릭하세요</font></a></span><br> </본문><br> <p>이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다. </p>
