이 기사에서는 JS에 의해 마스크 레이어 팝업 프레임을 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
어제 회사 웹 사이트는 정보를 프롬프트하기 위해 팝업 창이 필요했고 팝업 JS 코드 및 팝업 창 html을 함께 작성하도록 요청했습니다. 필요한 곳에 전화하십시오.
그렇게 많이 말하지 않고 코드를 업로드하면 호환성 문제가있을 것이라고 생각합니다. 당신이 그것을 보면 지적하십시오 :
다음과 같이 코드를 복사하십시오. <tyle>
#h-dialog {display : none; 위치 : 절대; z-index : 999999; 너비 : 400px; 높이 : 자동; 배경색 : #fff;}
#h-dialog .close {float : right; font-size : 30px; 마진-오른쪽 : 10px; 마진-탑 : 5px; 커서 : 포인터;}
#h-dialog .Title {높이 : 40px; 패딩 왼쪽 : 10px; 글꼴 크기 : 20px; 라인-높이 : 40px;}
#h-dialog #msgcont {높이 : 36px; 마진 : 30px 0 50px; 패딩 왼쪽 : 65px; 글꼴 크기 : 25px; 라인 높이 : 36px; 수직-정렬 : 중간; 배경 : URL (../ images/ui_alert.png) No-Repeat 20px 50%;}
</스타일>
<div id = "h-dialog">
<a onclick = "popupclose (this)"> × </a>
<div> 팁 </div>
<div id = "msgcont"> 컨텐츠 </div>
</div>
<script type = "text/javaScript">
// 배경 화면을 잠그십시오
함수 lekscreen () {
var clienth = document.body.offsetheight; // 신체 높이
var clientw = document.body.offsetWidth; // 신체 너비
var doch = document.body.scrollheight; // 브라우저 높이
var docw = document.body.scrollwidth; // 브라우저 너비
var bgw = clientw> docw? 클라이언트 : docw; // 유효한 너비를 얻습니다
var bgh = clienth> doch? 클라이언트 : 도치; // 유효한 높이를 얻습니다
var blackbg = document.createElement ( "div");
blackbg.id = "blackbg";
blackbg.style.position = "절대";
blackbg.style.zindex = "99999";
blackbg.style.top = "0";
blackbg.style.left = "0";
blackbg.style.width = bgw+"px";
blackbg.style.height = bgh+"px";
blackbg.style.opacity = "0.4";
blackbg.style.backgroundcolor = "#333";
document.body.appendchild (blackbg);
}
// 버튼 이벤트를 닫습니다
기능 popupclose (el) {
var blackbg = document.getElementById ( "blackbg");
blackbg && document.body.removechild (blackbg);
el.parentNode.style.display = "none";
}
// 원산지
기능 autoclose (id) {
id = id || "H-dialog";
var blackbg = document.getElementById ( "blackbg");
var objdiv = document.getElementById (id);
settimeout (function () {
blackbg && document.body.removechild (blackbg);
objdiv.style.display = "none";
}, 2000);
}
/**
*기능 : 팝업 정보
* 매개 변수 1 : 프롬프트 정보 내용
* 매개 변수 2 : 기본 프롬프트 정보 상태는 0입니다. 프롬프트 정보는 1입니다. 성공 정보는 다음과 같습니다.
* 매개 변수 3 : 팝업 DIV의 ID, 기본 "h-dialog"
* 매개 변수 4 : 팝업 창 컨텐츠의 ID, 기본 "msgcont"
**/
함수 showmsg (msg) {
msg = msg || "재 개설하십시오";
var 상태 = 인수 [1] || 0,
popupid = 인수 [2] || "h-dialog",
contentID = 인수 [3] || "msgcont";
잠금 화면 ();
// 화면의 실제 높이와 너비
var pagewidth = window.innerWidth;
var pageheight = window.innerheight;
if (typeof pagewidth! = "number") {
if (document.comPatMode == "CSS1compat") {
pagewidth = document.documentElement.clientWidth;
pageheight = document.documentElement.clientHeight;
} 또 다른 {
pagewidth = document.body.clientWidth;
pageheight = document.body.clientHeight;
}
}
// 스크롤 막대의 높이와 너비가 있습니다
var scrollleft = window.document.documentElement.scrollleft;
var scrolltop = 0;
if (typeof window.pageyOffset! = 'undefined') {
ScrollTop = Window.PageyOffSet;
} else if (typeof window.document.comPatMode! = 'undefined'&&
window.document.compatmode! = 'backcompat') {
scrolltop = window.document.documentElement.scrolltop;
} else if (typeof window.document.body! = 'undefined') {
scrolltop = window.document.body.scrolltop;
}
var div_x = (pagewidth -400) / 2 + scrollleft;
var div_y = (PageHeight -200) / 2 + ScrollTop;
var objdiv = document.getElementById (popupid);
if (상태) {
document.getElementById (contentId) .style.background = "URL ($ root/assets/images/ui_success.png) 없음 비비용 20px 50%";
}
document.getElementById (contentId) .innerHtml = msg;
objdiv.style.display = "block";
objdiv.style.left = div_x + "px";
objdiv.style.top = div_y + "px";
autoclose (popupid);
}
</스크립트>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.