jQuery 부동 창 구현 코드(두 가지 방법)

jQuery 부동 창 구현 코드(두 가지 방법)_jquery

WBOY

풀어 주다： 2016-05-16 18:19:55

원래의

1364명이 탐색했습니다.

第一种방법:
预览:
jQuery 부동 창 구현 코드(두 가지 방법)_jquery

Html代码

复代代码代码如下:

<머리>
浮动窗口

<본문>

这只是一个演示标题[ x ]

div와 같은 컨테이너 개체에 마우스 캡처가 있는 경우 setCapture 메서드의 bContainerCapture 매개변수가 false로 설정되지 않은 한 해당 컨테이너 내의 개체에서 발생하는 이벤트가 div에 의해 시작됩니다. false 값을 전달하면 컨테이너가 더 이상 모든 문서 이벤트를 캡처하지 않습니다. 대신 해당 컨테이너 내의 개체는 여전히 이벤트를 발생시키고 해당 이벤트도 예상대로 버블링됩니다.

---Alp가 편집한 내용입니다.

클릭

Js代码

复代码代码如下:

function drag(overFlow,title){ 
title.onmousedown = function(evt){ 
var doc = document; 
var evt = evt || 창.이벤트; 
var x = evt.offsetX?evt.offsetX:evt.layerX; 
var y = evt.offsetY?evt.offsetY:evt.layerY; 
if(overFlow.setCapture){ 
overFlow.setCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
doc.onmousemove = function(evt){ 
evt = evt || 창.이벤트; 
var xPosition = evt.pageX || evt.clientX; 
var yPosition = evt.pageY || evt.clientY; 
var newX = xPosition - x; 
var newY = yPosition - y; 
overFlow.style.left = newX; 
overFlow.style.top = newY; 
}; 
doc.onmouseup = function(){ 
if(overFlow.releaseCapture){ 
overFlow.releaseCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
doc.onmousemove=null; 
doc.onmouseup=null; 
}; 
}; 
} 

 

css代码

复主代码代码如下:

#over{
위치: 절대;
왼쪽: 300px;
상단: 200px;
테두리: 1px 단색 검정;
디스플레이: 없음;
배경: #cccccc;
커서: 기본값;
너비: 300px;
z-색인: 10;
불투명도: 1;
}
#title{
테두리: 1px 단색 #1840C4;
배경: #95B4DC;
패딩: 2px;
글꼴 크기:12px;
커서: 기본값;
}
#close{
커서: 포인터;
여백 오른쪽: 1px;
오버플로: 숨김;
}
#content{
테두리: 1px 단색 #C2D560;
배경: #EFF4D7;
}
#t{
여백-오른쪽:145px;
}
#mask{
z-색인: 1;
배경: #fff;
너비: 1024px;
높이: 800px;
}
#b{
위치: 절대;
왼쪽: 200px;
상단: 100px;
}
본문{
패딩: 0px;
여백: 0px;
}
#over{
배경: 투명;
}

두 번째 방법:
메시지 상자 마스크 레이어:

nothing...

'

　 페이지가 로드 중입니다:

부동 창을 닫습니다. 창을 닫으려면 작은 그림을 사용하는 것이 좋습니다

떠 있는 창 열기: 떠 있는 창 열기< /a>

코드 복사 코드는 다음과 같습니다.

 
// 메시지 박스 로딩 
함수 로딩(){ 
var o = $('#body_loading') 
o.css("left",(($(document).width())/2-( parseInt(o.width() )/2)) "px"); 
o.css("top",(($(document).height() $(document).scrollTop())/2- (parseInt(o.height( ))/2)) "px"); 
o.fadeIn("fast"); 
} 
// 메시지 상자가 사라집니다
functionload() { 
var o = $ ('#body_loading'); 
o.fadeOut("fast") 
} 
//플로팅 창 숨기기
function hideupload(){ 
$('#show_upload').hide(); 
$('#show_upload_iframe').hide(); 
} 
// 부동 창 팝업 
function showupload(ajaxurl) 
loading(); 
 var o=$('#show_upload'); 
var f=$('#show_upload_iframe') 
var top = 200; { 
url: ajaxurl, 
//cache: false, 
success: function(res){ 
loaded() 
o.html(res) 
o.css; ("왼쪽",(($(document ).width())/2-(parseInt(o.width())/2)) "px") 
if($(document).scrollTop() >200){ 
top = ($(document).height() $(document).scrollTop())/2-(parseInt(o.height())/2) 
} 
o.css("top",top "px"); 
f.css({'width':o.width(),'height':o.height(),'left':o.css ('왼쪽'),'상단': o.css('상단')}) 
f.show() 
o.show() 
} 
}); 🎜>} 