Js控制弹窗实现在任意分辨率下居中显示

2014-01-20  来源:本站原创  分类:javascript技巧  人气:3 

弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示,为了解决此问题,本文测试了一下案例在此与大家分享,有类似需求的朋友可以学习下

贴代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口_www.jb51.net</title>
<link type="text/css" rel="stylesheet" href="window.css">
<script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript">
$(document).ready(function (){
$("#btn_center").click(function (){
$(window).scroll(function (){
popcenterWindow();
});
});
$("#btn_right").click(function (){
$(window).scroll(function (){
poprightWindow();
});
});
$("#btn_left").click(function (){
$(window).scroll(function (){
popleftWindow();
});
});
});
</script>
</head>
<body>
<input type="button" value="弹出居中的窗口" id="btn_center">
<input type="button" value="弹出居右的窗口" id="btn_right">
<input type="button" value="弹出居左的窗口" id="btn_left">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="window" id="center">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="right">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="left">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>

JS

复制代码 代码如下:

//窗口的高度
var windowHeight;
//窗口的宽度
var windowWidth;
//弹窗的高度
var popHeight;
//弹窗的宽度
var popWidth;
//滚动条滚动的高度
var scrollTop;
//滚动条滚动的宽度
var scrollleft;
//延时的时间
var timeout;
function init(){
//获得窗口的高度
windowHeight=$(window).height();
//获得窗口的宽度
windowWidth=$(window).width();
//获得弹窗的高度
popHeight=$(".window").height();
//获得弹窗的宽度
popWidht=$(".window").width();
//获得滚动条的高度
scrollTop=$(window).scrollTop();
//获得滚动条的宽度
scrollleft=$(window).scrollLeft();
}
//定义关闭窗口
function closeWindow(){
$(".title img").click(function (){
$(this).parent().parent().hide("slow"); 

}); 

}
//定义弹出窗口的方法
function popcenterWindow(){
//先清空上一次的延迟
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=(windowHeight-popHeight)/2+scrollTop;
var popX=(windowWidth-popWidht)/2+scrollleft;
$("#center").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight+scrollTop-popHeight-10;
var popX=scrollleft-5;
$("#left").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight+scrollTop-10;
var popX=windowWidth-popWidht+scrollleft-10;
$("#right").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}

CSS

复制代码 代码如下:

<SPAN style="FONT-SIZE: 18px">.window{
width:250px;
background-color:#3FF;
padding:2px;
margin:5px;
position:absolute;
display:none;
}
.content{
height:150px;
background-color:#FFF;
padding:2px;
font-size:14px;
overflow:auto;
} 

.title{
padding:2px;
color:#999;
font-size:14px;
}
.title img{
float:right;
cursor:pointer;
}</SPAN>
相关文章
  • Js控制弹窗实现在任意分辨率下居中显示 2014-01-20

    弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示,为了解决此问题,本文测试了一下案例在此与大家分享,有类似需求的朋友可以学习下 贴代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • JS控制网页动态生成任意行列数表格的方法 2014-02-27

    这篇文章主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 <html> <head> <title>Js

  • js控制输入框获得和失去焦点时状态显示的方法 2014-10-05

    这篇文章主要介绍了js控制输入框获得和失去焦点时状态显示的方法,可实现判断输入框的焦点状态设置不同样式的功能,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • 在任意字符集下正常显示网页的方法二(续) 2014-03-26

    转:coolcode.cn 前几天写了一篇在任意字符集下正常显示网页的方法,里面介绍的很简单,就是把前128个字符以外的字符集都用 NCR 来表示,但是具体怎么转化我没有介绍,因为当时我觉得太简单了.但是后来发现有人问这个问题,这里就详细说明一下. 首先第一步是要把源字符集的字符串转化为 UTF-16 字符集,做这一步是因为 UTF-16 字符集中的每个字符都是两个字节,后面处理起来很容易,而如果在源字符集上直接做处理则很复杂.源字符集可以从原网页中的 meta 标签中获得,也可以单独指定,我的

  • js弹出的对话窗口永远保持居中显示 2014-12-04

    本文将介绍js弹出的对话窗口永远保持居中显示实现方法,需要了解的朋友可以参考下 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css&q

  • 在任意字符集下正常显示网页的方法一 2014-05-03

    转:coolcode.cn 通常情况下,我们的网页要指定一个编码字符集,如 GB2312.UTF-8.ISO-8859-1 等,这样我们就可以在网页上显示我们指定编码的文字了.但是我们很可能会遇到这种情况,那就是我们可能希望在 ISO-8859-1 编码的网页上显示汉字,或者在 GB2312 编码的网页上显示韩文等.当然一种解决办法就是我们不用 ISO-8859-1 或者 GB2312 编码,而统统都采用 UTF-8 编码,这样我们只要在这种编码下,就可以混合显示各国文字了,这是现在很多网站采用

  • js控制的遮罩层实例介绍 2014-08-08

    把项目里很土的弹窗,改成了遮罩层显示,现在感觉好多了.在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了,具体实现祥看本文,希望可以帮助到你 闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码: 父页面: <div id='newDiv1' style="display: none;"> <%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %>

  • js实现弹窗插件功能实例代码分享 2015-03-31

    这篇文章主要介绍了 目前测试下:支持IE6+ 火狐 谷歌游览器等. 先来看看此组件的基本配置项:如下: this.config = { targetCls : '.clickElem', // 点击元素 title: '我是龙恩', // 窗口标题 content : 'text:<p style="width:100px;height:100px">我是龙</p>', //content : 'img:http://www.baidu.com/a.jpg',

  • js 控制下拉菜单刷新的方法 2015-03-27

    js 控制下拉菜单刷新的方法,需要的朋友可以参考一下 思路:母版??藏控件 ?哪谌蓓?接收值 JS根??邮艿闹悼刂撇?雾?的??? 母版?: ?藏控件: <asp:Label ID="Lbl_X" runat="server" Text="text" style="display:none"></asp:Label> <asp:Label ID="Lbl_Xn" runat=&

  • IE 下 用js控制Flash 2011-09-02

    你看一下这个html文件,用js控制Flash. <embed id="flashplayer" wmode="Opaque" src="__PUBLIC__/Skins/Sites/default/flash/qy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Vers

  • 如何用js控制frame的隐藏或显示的解决办法 2015-02-21

    如何用js控制frame的隐藏或显示的解决办法,需要的朋友可以参考一下 index.htm <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <

  • JS控制一个DIV层在指定时间内消失的方法 2013-10-13

    这篇文章主要介绍了JS控制一个DIV层在指定时间内消失的方法,需要的朋友可以参考下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • js控制文本框只输入数字和小数点的方法 2013-12-05

    这篇文章主要介绍了js控制文本框只输入数字和小数点的方法,实例分析了javascript使用正则表达式实现限制数字和小数点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js控制文本框只输入数字和小数点的方法.分享给大家供大家参考.具体实现方法如下: function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符

  • JS 控制CSS样式表 2014-01-03

    JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: docu

  • 一个js控制的导航菜单实例代码 2014-03-06

    这篇文章主要是对js控制的导航菜单实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容: 这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生: 这是一个asp.net的master页面里面的菜单部分 Html部分: <%@ Master Language="C#" AutoEventWireup=&

  • js控制input输入字符解析 2014-04-08

    本篇文章主要是对js控制input输入字符方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 只能是中文<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)even

  • js控制href内容的连接内容的变化示例 2014-04-28

    这篇文章主要介绍了使用js控制href内容的连接内容的变化,需要的朋友可以参考下 html: <a data-toggle="modal" href="#myModal_devices" id="check_devices" class="guide_s step1 ok" onclick="GetLanHosts();return false;"><span>►</span&

  • js控制再次点击按钮之间的间隔时间可防止重复提交 2014-05-06

    使用js控制再次点击按钮之间的间隔时间可防止重复提交,需要的朋友可以参考下 <script type="text/javascript" language="javascript"> var wait = 60; function change() { $o = $("#J_refresh_checkcode"); if(wait == 0) { $o.removeAttr("disabled"); $o.html

  • JS控制图片翻转示例代码(兼容firefox,ie,chrome) 2014-05-12

    本篇文章主要介绍了JS控制图片翻转示例代码(兼容firefox,ie,chrome) 需要的朋友可以过来参考下,希望对大家有所帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • js 右下角弹窗效果代码(IE only) 2014-06-06

    js 右下角弹窗效果代码,虽然IE only,但这个代码的逻辑可以参考下.了解下IE与firefox的区别,自己写个兼容的版本吧. 右下角弹窗效果练习 × [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]