이 기사에서는 JS+CSS의 Draggable Pop-Up 프롬프트 상자의 구현에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> JS+CSS에서 만든 드래그 가능한 팝업 프롬프트 상자 </title>
<스타일 유형 = "텍스트/CSS">
A {색상 :#000; 글꼴 크기 : 12px; 텍스트 결정 : 없음}
A : 호버 {색상 :#900; 텍스트 결정 : 밑줄}
Body {Back 오버플로 : 숨겨진}
#massage_box {위치 : 절대; 왼쪽 : expression ((body.clientWidth-350)/2); 상단 : expression ((body.clientHeight-200)/2); 너비 : 350px; 높이 : 200px; 필터 : DropShadow (color =#666666, offx = 3, offy = 3, positive = 2); z- 인덱스 : 2; 가시성 : 숨겨진}
#마스크 {위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 표현 (body.scrollwidth); 높이 : expression (body.scrollheight); 배경 :#666; 필터 : 알파 (불투명도 = 60); z- 인덱스 : 1; 가시성 : 숨겨진}
.massage {국경 :#036 솔리드; 국경비 : 1 1 3 1; 너비 : 95%; 높이 : 95%; 배경 : #ffff; 색상 :#036; 글꼴 크기 : 12px; 라인 높이 : 150%}
.Header {배경 :#036; 높이 : 10%; Font-Family : Verdana, Arial, Helvetica, Sans-serif; 글꼴 크기 : 12px; 패딩 : 3 5 0 5; 색상 : #fff}
</스타일>
<!-구현 레이어 이동->
<script language = "javaScript">
var obj = ''
문서 .OnMouseUp = mup
문서 .ONMOUSEMOVE = MMOVE
함수 mdown (객체) {
Object.id
document.all (obj) .setCapture ()
px = event.x-document.all (obj) .style.pixelleft;
py = event.y-document.all (obj) .style.pixeltop;
}
함수 mmove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
}
}
함수 mup () {
if (obj! = '') {
document.all (obj) .releasecapture ();
obj = '';
}
}
</스크립트>
</head> <body>
<div id = "massage_box"> <div>
<div onmousedown = mdown (Massage_box)>
<span onclick = "massage_box.style.visibility = 'hidden'; mask.style.visibility = 'hidden'"style = "float; 오른쪽; 디스플레이 : 인라인; 커서 : 핸드"> </span> </div>
</div> </div>
<div id = "마스크"> </div>
<span onclick = "mask.style.visibility = 'Visible'; massage_box.style.visibility = 'Visible'"Style = "Cursor : hand"> <a href = "#"> <font size = 18px>이 프롬프트를 클릭하십시오 </a> </span>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.