JS로 페이지 중앙에 간단한 팝업 레이어 DIV를 만들고 middle_javascript 스킬로 마스크를 표시하는 구체적인 방법-JS 튜토리얼-php.cn

이틀 동안 사용해본 결과 생각보다 많은 문제에 부딪혔습니다. IE6 배경 투명도, IE6 중앙 표시, js 객체 이해 openID = 표시 버튼, conID = 필요 표시되는 div, closeID = 닫기 버튼 해결됨: 1. ie6에서 선택 요소는 차단될 수 있지만 ie6에서는 div가 투명하지 않습니다. 2. 팝업 div는 항상 표시될 수 있습니다. 브라우저 화면 중앙에 문제: 1. 현재 .class는 지원하지 않고 #id만 지원합니다 2. 표시해야 할 div는 CSS를 직접 설정해야 합니다 3. ie6에서는 CSS를 설정해야 합니다. 예: div {_position:absolute ;_top:expression(documentElement.scrollTop 340 "px") } 4.ie6의 배경 div에는 투명도가 없습니다. . 온라인에서 검색한 결과 해결이 안되면 메시지 남겨주세요

코드 복사 다음과 같습니다: Js制作简单弹出层DIV在页面居中 中间显示 遮罩 方法 *{margin:0;padding:0;} #bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;} /****订单弹出框*****/ .orderMsg{ position:fixed;_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); background:#fff; border:1px solid #939395; width:500px; height:340px;top: 50%;left: 50%;margin: -200px 0 0 -250px; overflow:hidden; z-index:99999; font-size:14px; color:#000; display:none;} .orderMsg dl{ overflow:hidden; padding:20px; margin:0;} .orderMsg dl dt{ line-height:30px;} .orderMsg dl dd{ line-height:25px; height:25px; padding-left:10px; margin:0;} .orderMsg dl dd label{ padding-left:5px;} .orderMsg dl dd.cBtn{ width:102px; height:28px; background:url(../images/member/chooseBtn.gif) no-repeat; margin-top:10px; padding:0;} .orderMsg dl dd.cBtn a{ display:block; text-align:center;} .orderMsg dl dd.cBtn a:link,.orderMsg dl dd.cBtn a:visited{ color:#000;} .orderMsg dl dd.lBtn{ float:left; display:inline; margin-left:100px;} .orderMsg dl dd.rBtn{ float:left; display:inline; margin-left:10px;} 点击弹出div sdfdsf Volvo Saab Mercedes Audi 点击弹出div sdfdsf Volvo Saab Mercedes Audi 请您告知我们取消订单的原因，以便我们改进。非常感谢! 改变主意,现在不想买了 刚才信息填错了,要重新下单 先取消,再更换或添加新商品 网银,信用卡等支付有问题 等待时间过长,不耐烦了 商品价格较贵 出现商品缺货情况 其它的原因 72小时到期自动取消(不可选) 选好了 点击取消 /* openID=표시 버튼, conID=표시해야 하는 div, closeID=닫기 버튼 해결됨: 1. IE6에서는 선택 요소가 차단될 수 있지만 IE6에서는 div가 투명하지 않습니다 2. 팝업 div가 항상 브라우저 화면 중앙에 표시될 수 있습니다 문제: 1. 현재 .class는 지원되지 않으며, #id만 지원됩니다. 2. 표시해야 할 div는 CSS를 직접 설정해야 합니다 3. ie6에서는 CSS를 설정해야 합니다 . 예를 들어 div {_position:absolute;_top:expression(documentElement.scrollTop 340 "px"); } 4. 온라인에서 검색한 결과로는 해결할 수 없습니다. 방법이 있으시면 메시지를 남겨주세요 */ var _CalF = { //편리한 방법 $: function( id){return document.getElementById(id)}, create : function (id){return document.createElement(id)}, append : function(id){return document.body.appendChild(id) }, remove : function(id){return document.body.removeChild (id)} } 함수 팝업(openID,conID,closeID){ this.onclick(openID,conID, closeID); } popup.prototype = { cssStyle: "너비:100%;위치:절대;왼쪽:0;상단:0;필터:알파(불투명도 = 50);불투명도:0.5 ;테두리:0;오버플로:자동;", createShadowDiv: 함수( ){ //배경 마스크 var ShadowDiv = _CalF.create("div"); shadowDiv.id = "shadowDiv" ; shadowDiv.style.cssText = this.cssStyle; shadowDiv. style.height = document.body.scrollHeight "px"; shadowDiv.style.BackgroundColor = "#000" shadowDiv.style.zindex = 100; _CalF.append(shadowDiv); }, createIframe : function(){ //iframe var iframe = _CalF.create("iframe"); iframe.id = "shadowIframe"; iframe.style.cssText = this .cssStyle; iframe.style.height = document.body.scrollHeight "px"; iframe.style.zindex = 99 ; _CalF.append(iframe); }, RemoveDiv : function(){ _CalF.remove(_CalF.$("shadowDiv")); _CalF.remove(_CalF .$("shadowIframe")); }, onclick: function(openID,conID,closeID){ var that = this; _CalF.$(openID).onclick = function( ){ if(window.ActiveXObject){ //ie6 if (!window.XMLHttpRequest){ document.body.style.cssText = "_배경-이미지: url(about:blank);_Background -attachment: 고정;"; } } 그 .createIframe(); that.createShadowDiv(); _CalF.$(conID).style.display = "차단" ; } document.getElementById(closeID).onclick = 기능( ){ _CalF.$(conID).style.display = "none"; that.removeDiv(); } } } var bt = 새 팝업( "bt","orderMsg","close");