div+js屏蔽页面弹出.doc

说明：很多网站上都有一个很美观看上去也很实用的效果，如：你想发表留言或评论，或下载东西的时候，网站提示你没有登录，并弹出登录的页面。而弹出的这个登录页面，把原来的页面屏蔽，但能看到原来的页面信息，给人的效果是：感觉弹出了一个透明的登录页面，只有先登录后才能进行其他操作。那么这个效果是如何实现的呢？下面详细的实现一下。具备知识：div + css + js实现效果：点击 页面上的 登录 按钮，实现弹出透明登录页面，登录成功后，并刷新主页面。代码一：登录按钮。随便添加到页面中，用来点击弹出透明层。代码二：在页面的末尾处，最好在 标签的上面，确定 div 层代码，用作弹出的登录页面层。关闭窗口/屏蔽层，默认隐藏代码三： #maps z-index: 1;#mapBgLayer background: #FFFFFF none repeat scroll 0 0;height: 100%;left:0;top:0;width:100%;filter: alpha(opacity=80); /* IE */-moz-opacity: 0.8; /* Moz + FF */z-index: 10000;#mapLayer width: 737px;height: 514px;margin: -250px 0 0 -370px;left: 50%;top: 50%;position: absolute;background: #FFF;z-index: 10001;border: 3px solid #1B5BAC;#mapLayer h3 background: #a3b393;line-height: 29px;padding-left: 15px;font-size: 14px;color: #00235C;border: 1px solid #FFF;#mapLayer .closeMap position: absolute;right: 10px;top: 10px;background: url(/jurenschool/images/advSearch_close.png) no-repeat;height: 11px;width: 11px;overflow: hidden;line-height: 100px;cursor: pointer;#mapLayer .mapArea width: 735px;height: 480px;margin: 0 auto; overflow: hidden;简要分析：其实这些样式，除了一些经常用到的，不好理解和掌握的有 三个：1. z-index ：个人认为这是一个页面反映上的垂直效果。即那些div层，都是可以层叠放置的，就可以用z-index 来实现 他们的层叠顺序。如 mapBgLayer 的 顺序 一定要在 mapLayer 的下面，即 z-index 要小。2. 透明层的处理：这个的话，对于浏览器不同，可能效果不同。对于 IE 的话，可以用 css 的 filter 来实现（filter 可参看后面附录）其他的话，FF 可以用 -moz-opacity: 0.8;3. div 定位的问题。是相对还是绝对，就要看什么样的效果了。可以用 position 来实现。absolute 可是绝对的定位哦。代码四：js 控制其效果/*显示地图页面*/function showMap(id) var bg = document.getElementById(mapBgLayer);var con = document.getElementById(mapLayer);var w = document.documentElement.clientWidth;var h = document.body.offsetHeight;bg.style.display = ;bg.style.width = w + px;bg.style.height = h + px;/*关闭*/function closeMap() var bg = document.getElementById(mapBgLayer);var con = document.getElementById(mapLayer);bg.style.display = none;con.style.display = none;var w = document.body.clientWidt