HTML+JS彈出可移動DIV遮罩層

來源:互聯網
上載者:User

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>個人介紹</title><style>body{margin:0px;padding:0px;font-size:14px;}#t  {position:absolute;float:left;left:0px;top:0px;}#a  {float:left;}.al {opacity: 0.80;filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);}.al2{opacity: 0.00;filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);}U {DISPLAY: block;OVERFLOW: hidden;HEIGHT: 1px}U.f1 {background-color:#5cc;BACKGROUND: #5cc;MARGIN: 0px 3px}U.f2 {background-color:#5cc;BORDER-RIGHT: #5cc 2px solid;MARGIN: 0px 1px;BORDER-LEFT: #5cc 2px solid}U.f3 {background-color:#5cc;BORDER-RIGHT: #5cc 1px solid;MARGIN: 0px 1px;BORDER-LEFT: #5cc 1px solid}.d_top{clear:both;overflow:hidden;background-color:#5cc;height:29px;vertical-align:bottom;}.d_top a{float:right;margin-top:5px;margin-right:13px;padding-top:3px;width:18px;color:red;background-color:#789;text-decoration:none;font-weight:bold;text-align:center;vertical-align:middle;}.d_top span{float:left;font-size:13px;margin-left:15px;margin-top:8px;}.d_body {BORDER-RIGHT: #5cc 3px solid;BORDER-LEFT: #5cc 3px solid;padding:10px;height:200px;background-color:#fff;}.d_foot{clear:both;overflow:hidden;background-color:#5cc;height:2px;}</style><script type="text/javascript">function $(id){return document.getElementById(id);}function show(id){var t = $(id);t.style.width=document.body.clientWidth;t.style.height=document.body.clientHeight;window.onresize=function(){t.style.width=document.body.clientWidth;t.style.height=document.body.clientHeight;}$(id).style.display="";}function cl(id){$(id).style.display="none";}//-------------------------------------------------------------------------------function moveEvent(e,id){var isIE = (document.all)?true:false;//navigator.userAgent.toLowerCase().indexOf("msie") != -1;//var event=window.event||event;drag = true;xx=isIE?event.x:e.pageX;yy=isIE?event.y:e.pageY;L = document.getElementById(id).offsetLeft;T = document.getElementById(id).offsetTop;document. = function(e) {if (drag) {x=isIE?event.x:e.pageX;     if(x<0)x=0;y=isIE?event.y:e.pageY;     if(y<0)y=0;document.getElementById(id).style.left = L-xx+x;document.getElementById(id).style.top  = T-yy+y;}}document. = false;}}window.onscroll=function(){$("back_div").style.width=document.body.scrollWidth;$("back_div").style.height=document.body.scrollHeight;}</script></head><body><div style="position:absolute; left:300px; top:200px;"><!--以下是調用方法--><a href=\'#\'"  onClick="show('t')">提示:點這裡查看個人介紹</a></div><!--以下是彈出遮罩層的div--><div id="t" style="display:none;"><div style="width:100%;height:100%; z-index:100; position:absolute; float:left; background-color:#555;overflow:hidden;" class="al" id="back_div"><iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe></div><DIV style="WIDTH: 500px; position:absolute;float:left;top:25%; left:30%; z-index:999; clear:both; overflow:hidden;" id="t_div"><iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe><U class="f1"></U><U class="f2"></U><U class="f3"></U><div class="d_top" onMouseDown="moveEvent(event,'t_div')"><span>系統提示</span><a href=\'#\'"  onClick="cl('t')">×</a></div><DIV class="d_body" >個人介紹:電腦知識、網站運營、軟體開發、平面設計等專業。</DIV><div class="d_foot"></div><U class="f3"></U><U class="f2"></U><U class="f1"></U></DIV></div><!--以上是彈出遮罩層的div--></body></html>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.