간단하고 아름다운 js 팝업 창은 자유롭게 드래그할 수 있으며 대부분의 browser_javascript 기술과 호환됩니다.

간단하고 아름다운 js 팝업창 - 자유로운 드래그 앤 드롭

코드 복사 코드는 다음과 같습니다 -equiv="Content-Type" content="text/html; charset=utf-8"> 간단하고 아름다운 js 팝업 창 - 무료 드래그 script src="js/jquery-1.7.2.js"> //작성자: zhao jinhan // 시간: 2013년 10월 22일 //이메일: xb_zjh@126.com function drag(o,s) { //drag(obj [,scroll]); /obj: 개체의 ID 또는 개체 자체 //scroll (선택 사항): 창을 드래그할 때 개체가 미끄러지는지 여부, 기본값은 no

if (typeof o == " 문자열" ) o = document.getElementById(o); o.orig_x =parseInt(o.style.left) - document.body.scrollLeft; o.orig_y =parseInt(o.style.top) - document.body.scrollTop; o.orig_index = o.style.zIndex;

o.onmousedown = function(a) this.style.zIndex = var d=document; if(!a)a=window.event; var x = a.clientX d.body.scrollLeft-o.offsetLeft; var y = a.clientY d. body.scrollTop-o.offsetTop;

d.ondragstart = "false 반환;" d.onselectstart = "false 반환;" d.onselect = "document.selection.empty() ;"

if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove = function(a) { if(!a)a=window.event; o.style.left = a.clientX document.body.scrollLeft-x ; o.style.top = a.clientY document.body.scrollTop-y; o.orig_x =parseInt(o.style.left) - document.body.scrollLeft o.orig_y; ParseInt(o.style.top) - document.body.scrollTop; }

d.onmouseup = function() { if(o.releaseCapture) o. releaseCapture( ); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP) d.onmousemove = null d .ondragstart = null; d.onselectstart = null; o.style.cursor = "normal" o.orig_index ; } }

if (s) { var orig_scroll = window.onscroll?window.onscroll:function () window.onscroll = 함수 ( ) { orig_scroll(); o.style.left = o.orig_x document.body.scrollLeft o.style.top = o.orig_y document.body.scrollTop; } } }

var title = '프롬프트 제목'; var message='프롬프트 내용' var TrueEvent=''; CancelEvent= ''; var CloseEvent=''; functionDialogalert(title, message, TrueEvent, CancelEvent, CloseEvent) { $("#divBackground").removeClass("hidden") $("#divMaincontent").removeClass("hidden")

$("#alertTitle").html(title) $("#alertContent").html(message );

$("#btnSure").click(function () { $("#divBackground").addClass("hidden"); $("#divMaincontent") .addClass ("hidden") $("#btnSure").unbind("click"); if (TrueEvent) { //확인 후 URL로 이동 window.location .href = TrueEvent;

}) //확인

$("#btnCancel").click(function () { $("#divBackground" ).addClass("hidden"); $("#divMaincontent").addClass("hidden") $("#btnCancel").unbind("click"); CancelEvent) { //취소 후 URL로 이동 window.location.href = CancelEvent } });//취소

$("#btnClose") .click (function () { $("#divBackground").addClass("hidden"); $("#divMaincontent").addClass("hidden"); $("# btnClose" ).unbind("click"); if (CloseEvent) { //닫은 후 URL 점프 window.location.href = CloseEvent; }

} ) ;//://www.baidu.com/','http://www.icode100.com/','http://bbs.icode100.com/') }); >

body, p { 배경: 없음 반복 스크롤 0 0 색상: # 333333; 글꼴 크기: 12px; 여백: 0; 패딩: 0; } .hidden { 표시: 없음} 🎜>.right { float:right } #divMaincontent { font-family: "Microsoft Yahei","宋体",Microsoft Yahei,Tahoma,Arial,sans-serif font-size: 100 %; 글꼴-가중치: 일반; 위치:절대; 수직 정렬: 기준선 } #divMaincontent a { 텍스트 장식: 없음; .blackf1 { 지우기: 글꼴 크기: 0; 높이: 12px; 줄 높이: 12px; >색상: #999999; } .pm_main { 테두리: 4px 단색 rgba(0, 0, 0, 0.1) 왼쪽: 40%; 🎜>상단: 40%; 너비: 318px; z-index: 10001; } .pm_tit1 { 배경: url("images/dialog_blue.gif") 반복- x 스크롤 0 0 rgba(0, 0, 0, 0); 색상: #FFFFFF; 높이: 26px; 패딩: 0 1px; 텍스트 들여쓰기: 16px; 너비: 100% 커서:이동 } .pm_tit1 a { 배경: url("images/pm_bg.png") 반복 없음 스크롤 0 -67px rgba(0, 0, 0, 0); 커서: 포인터; 높이: 20px; 여백 오른쪽: 10px; 너비: 20px; } .pm_tit1 a:hover { 배경 위치: 0 -90px; } .pm_con1 { 배경: 없음 반복 스크롤 0 0 #CCCCCC; 최대 높이: 150px; overflow-y: 자동; 패딩: 0 1px 1px; 너비: 100%; } .pm_con2 { 배경: 없음 반복 스크롤 0 0 #FFFFFF; 오버플로: 숨김; 패딩: 16px 0; 너비: 100%; } .pm_con2 p { 여백-왼쪽: 80px; 패딩: 2px 0; 텍스트 정렬: 왼쪽; } .pm_con2 p.fontcolorf3 { 글꼴 크기: 14px; 글꼴 두께: 굵게; } .pm_btn1 a, .pm_btn1 a:link, .pm_btn1 a:visited, .pm_btn1 a:hover, .pm_btn1 a:active { 배경: url("images/pm_bg.png") 반복되지 않는 스크롤 0 0 rgba(0, 0, 0, 0); 디스플레이: 인라인 블록; 높이: 28px; 줄 높이: 28px; 여백: 3px 40px 0 0; 텍스트 정렬: 가운데; 너비: 53px; } .pm_btn1 a:hover { 배경 위치: 0 -35px; 색상: #333333; 텍스트 장식: 없음; } 提示信息 提示

今日秒杀已售罄

确认 취소

效果图이미지： 이미지/리면적 이미지：

dialog_blue.gif: pm_bg.png 文件包下载： http://www.jb51.net/jiaoben/112059.html

간단하고 아름다운 js 팝업 창은 자유롭게 드래그할 수 있으며 대부분의 browser_javascript 기술과 호환됩니다.

관련 기사