순수 JavaScript_javascript 기술로 구현된 완벽한 그라데이션 팝업 레이어 효과 코드

제목에서 알 수 있듯이 이 기사에서는 순수 스크립트 JavaScript를 사용하여 그래디언트 팝업 레이어를 구현합니다. 아이디어도 매우 간단합니다. IFrame을 사용하여 이를 덮은 다음 DIV를 사용하여 팝업 레이어의 콘텐츠를 표시합니다. 마지막으로 내장 함수인 setInterval() 및clearInterval()을 사용하여 그래디언트를 구현합니다. 원리는 매우 간단하지만 DOM 객체/요소의 정확한 제어에 주의를 기울여야 합니다. 코드가 비교적 간단하기 때문에 여기서는 자세히 설명하지 않겠습니다. 다음 코드는 IE6 및 FF3.5의 테스트를 통과했습니다.
Script Flyout.js:

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

// JScript 파일
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
window.isIE = true;
window.isIE6 = navigator.appVersion.indexOf("MSIE 6.0;") > -1;
window.isIE7 = navigator.appVersion.indexOf("MSIE 7.0;") > -1;
window.isIE8 = navigator.appVersion.indexOf("MSIE 8.0;") > -1;
}
var $ = function(objID) { return document.getElementById(objID) };
var _flyout;
var _fadeTimer;
function showflyout(divWidth, divHeight, paddingWidth) {
var flyout = function() {
}
flyout.prototype = {
clientWidth: document.documentElement.clientWidth,
clientHeight : document.documentElement.clientHeight,
scrollWidth: document.documentElement.scrollWidth,
scrollHeight: document.documentElement.scrollHeight,
iframeID: "envelopIframe",
divID: "popupcontent",
iframebgColor: "#888888",
show: function(divContent) {
//봉투 iframe 만들기
cssText = "position:absolute; z-index:100; background-color:#888888; border- 너비:0px; 필터:알파(불투명도=0);";
cssText = "왼쪽:0px;";
cssText = "상단:0px;";
cssText = "너비:" this.scrollWidth "px;";
cssText = "높이:" this.scrollHeight "px;";
this.create("iframe", this.iframeID, cssText, "Cppl_IFrameSrc.htm", "");
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, true) }, 5);
//플라이아웃 만들기
var cssText = "";
cssText = "디스플레이:블록; _위치:절대; 위치:고정; Z-색인:101; 테두리:단색 1px 회색; 배경색:흰색;";
cssText = "왼쪽:" (this.clientWidth - divWidth - paddingWidth) / 2 "px;";
cssText = "top:" (this.clientHeight - divHeight - paddingWidth) / 2 "px;";
cssText = "너비:" (divWidth paddingWidth) "px;";
cssText = "높이: "(divHeight paddingWidth) "px;";
this.create("div", this.divID, cssText, "", divContent);
},
create: function(type, id, csstext, iframesrc, innerhtml) {
var obj = document.createElement(type);
if (iframesrc.length > 0) {
obj.src = iframesrc;
}
obj.setAttribute("id", id);
obj.style.cssText = csstext;
if (innerhtml.length > 0) {
obj.innerHTML = innerhtml;
}
document.body.appendChild(obj);
if (iframesrc.length > 0) {
if (window.isIE) {
window.envelopIframe.document.bgColor = this.iframebgColor;
}
}
},
close: function() {
var objIframe = document.getElementById(this.iframeID);
var objDiv = document.getElementById(this.divID);
if (objIframe && objDiv) {
document.body.removeChild(objIframe);
document.body.removeChild(objDiv);
}
},
onresize: function() {
var objIframe = document.getElementById(this.iframeID);
var objDiv = document.getElementById(this.divID);
if (objIframe && objDiv) {
objIframe.style.width = document.documentElement.scrollWidth "px";
objIframe.style.height = document.documentElement.scrollHeight "px";
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 "px";
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 "px";
}
},
onscroll: function() {
var objDiv = document.getElementById(this.divID);
if (objDiv) {
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 document.documentElement.scrollLeft "px";
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 document.documentElement.scrollTop "px";
}
}
};
_flyout = 새로운 플라이아웃();
_flyout.show("플라이아웃입니다.

플라이아웃 닫기

");
}
function closeflyout() {
clearInterval(_fadeTimer);
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, false) }, 5);
}
window.onresize = function() {
if (_flyout) {
_flyout.onresize();
}
};
window.onscroll = function() {
if (_flyout && isIE6) {
_flyout.onscroll();
}
};
function fadeIframe(objId, speed, minOpacity, maxOpacity, flag) {
var 대화 상자 = $(objId);
if (대화상자) {
var value;
if (플래그) {
if (parseFloat(dialog.style.opacity) <= maxOpacity) {
value =parseFloat(dialog.style.opacity) speed;
dialog.style.filter = 'alpha(opacity=' value * 100 ')';
dialog.style.opacity = ''값'';
}
else {
clearInterval(_fadeTimer);
}
}
else {
if (parseFloat(dialog.style.opacity) >= minOpacity) {
value = parseFloat(dialog.style.opacity) - 속도;
dialog.style.filter = 'alpha(opacity=' value * 100 ')';
dialog.style.opacity = ''값'';
}
else {
clearInterval(_fadeTimer);
if (_flyout) {
_flyout.close();
}
}
}
}
}

调用ASPX代码:

复aze代码 代码如下:

<%@ 페이지 Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>






<본문>

테스트하려면 클릭하세요

最终效果图：