JQuery 弹出层,始终显示在屏幕正中间
2024-09-27 02:03:00
1.让层始终显示在屏幕正中间:
样式代码:
- .model{
- position: absolute; z-index: 1003;
- width:320px; height:320px; text-align:center;
- background-color:#0066FF; display: none;
- }
jquery代码:
- //让指定的DIV始终显示在屏幕正中间
- function letDivCenter(divName){
- var top = ($(window).height() - $(divName).height())/2;
- var left = ($(window).width() - $(divName).width())/2;
- var scrollTop = $(document).scrollTop();
- var scrollLeft = $(document).scrollLeft();
- $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
- }
html代码:
- <a href="javascript:;" onclick="letDivCenter('#model')">点我让DIV始终显示在屏幕中间</a><br />
- <div>
- <div id="model" class="model">
- 这是内容(不过没有垂直居中显示)希望各位高手,能够补充。小弟在此谢过了。
- </div>
- </div>
运行一下看看效果吧。
接下来总结一下,将它们整合成一个。即,当弹出div层的时候,同时也要弹出遮罩层,好,废话不多说,看代码:
1。CSS样式:
- <style type="text/css">
- .mask {
- position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
- z-index: 1002; left: 0px;
- opacity:0.5; -moz-opacity:0.5;
- }
- .model{
- position: absolute; z-index: 1003;
- width:320px; height:320px; text-align:center;
- background-color:#0066FF; display: none;
- }
- </style>
2。Jquery代码:
- <script type="text/javascript">
- //兼容火狐、IE8
- function showMask(){
- $("#mask").css("height",$(document).height());
- $("#mask").css("width",$(document).width());
- $("#mask").show();
- }
- //让指定的DIV始终显示在屏幕正中间
- function letDivCenter(divName){
- var top = ($(window).height() - $(divName).height())/2;
- var left = ($(window).width() - $(divName).width())/2;
- var scrollTop = $(document).scrollTop();
- var scrollLeft = $(document).scrollLeft();
- $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
- }
- function showAll(divName){
- showMask();
- letDivCenter(divName);
- }
- </script>
3.HTML代码:
- <div id="mask" class="mask"></div>
- <a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
- <a href="javascript:;" onclick="letDivCenter('#model')">点我让DIV始终显示在屏幕中间</a><br />
- <a href="javascript:;" onclick="showAll('#model')">点我显示所有</a><br />
- <div>
- <div id="model" class="model">
- 这是内容(不过没有垂直居中显示)希望各位高手,能够补充。小弟在此谢过了。
- </div>
- </div>
最新文章
- Leetcode Valid Number
- Tomcat6配置webdav协议
- MVC 异常处理机制
- ACM: 敌兵布阵 解题报告 -线段树
- 【转】Struts1.x系列教程(3):属性(资源)文件乱码问题的解决之道
- linux下xargs命令用法详解
- CEF js调用C#封装类含注释
- 将ANGULAR与后端请求结合
- 【译】 AWK教程指南 3计算并打印文件中指定的字段数据
- Android开发之PagerAdapter
- 转:如何在Linux上提高文本的搜索效率
- What and where are the stack and heap?
- myeclipse实现Servlet实例(2) 继承GenericServet类实现,需要重写service方法
- python之字符串详解2
- JQuery 通过方向键控制div上下左右移动
- Java 实现倒计时(由秒计算天、小时、分钟、秒)
- springboot 前后端分离项目跨域配置
- stock抓取基本资料
- 磁盘分区(20G升50G)
- select,radio,checkbox兼容性