Javascript 弹出层居中效果

 代码如下 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Javascript 弹出层居中</title>
 
  <script type="text/javascript">
 window.onload = show_center; //页面加载完触发事件
 onresize  = show_center; //浏览器改变大小时触发事件
 
 
 function show_center(){
 
  var body_width = document.body.clientWidth;
  var body_height = document.body.clientHeight;
  var div_width = document.getElementById("show_center").clientWidth;
  var div_height = document.getElementById("show_center").clientWidth;
 
  var div_left = (body_width - div_width) /2;
  var div_top = (body_height - div_height) /2;
 
  if(body_height <= div_height){div_top = 0;}
  if(body_width <= div_width){div_left = 0;}
  document.getElementById("show_center").style.left = div_left + 'px';
  document.getElementById("show_center").style.top = div_top + 'px';
 }
  </script>
  </head>
  <body style="background-color:#666">
 <div id="show_center" style="position:absolute;width:200px;height:100px;background-color:#000; color:#fff; border:2px solid #fff">居中显示</div
  </body>
</html>
时间： 2024-10-25 10:29:18

Javascript 弹出层居中效果的相关文章

javascript弹出层输入框

 这篇文章主要介绍了javascript弹出层输入框(示例代码).需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: 代码如下:    <script language="javascript" type="text/javascript">          function alertWin(title, msg, w, h) {                var titleheight = "22px"; // 窗口标

jquery实现弹出层遮罩效果的简单实例

 这篇文章主要介绍了jquery实现弹出层遮罩效果的简单实例.需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <input type="button" value="高级搜索" id="click_test4" />"; var content4 = "<center>高级搜索</center><form action='' method='post' id='formUse

asp.net +jquery 弹出层登录效果

页面加载完成时: 当验证码得到焦点时: 实现这个ajax为了节约时间,用户名/密码/验证码我都没判断是否为空,我也没用数据库,登录用户名和密码都是admin 登录成功时: 这里说明一下,由于时间有限,你可以把这个登录成功或者登录失败,效果做一下,直接在登录窗口上放一个<div id="message"><div>然后设置其样式,把提示内容追加上去,根据自己个人需求来,下面贴我的全部代码: 下面我们一个个文件来看login.htm文件  代码如下 复制代码 <

jquery原创弹出层折叠效果点击折叠弹出一个层

 今天整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息,感兴趣的朋友可以学习下 弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可.    html:   代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 

jquery原创弹出层折叠效果点击折叠弹出一个层_jquery

弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1

javascript弹出层弹出微信扫描的实例

js点击一个按钮,弹出一个层,并遮住网页后面的内容,使之为半透明状.这种效果用的很多,比如论坛登陆.签到时候的弹出层,比如现在流行的微信扫一扫,点击一个按钮时候的弹出层.如下面的这种效果: js弹出层源码:  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

Js实现点击超链接弹出层，效果仿Discuz登录！

主要应用到的是dispaly:none 和 dispaly:block;来控制实现的:  <a id="link" href="#" onclick="linkonclick()">登录</a>这里还有一种写法  <a href="javascript:linkonclick()">登录</a>  两种效果是一样的:   View Code <!DOCTYPE html P

javascript 弹出层组件（升级版）_javascript技巧

这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住.第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随.大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复. 下面是代码,里面都有注释,可以直接运行. 在线演示 http://demo.jb51.net/js/20

javascript弹出层输入框(示例代码)_javascript技巧

如下所示: 复制代码 代码如下:    <script language="javascript" type="text/javascript">         function alertWin(title, msg, w, h) {             var titleheight = "22px"; // 窗口标题高度             var bordercolor = "#666699";