weebox弹出窗口不居中显示的解决方法


Posted in Javascript onNovember 27, 2017

某些页面weebox弹出窗口不居中显示,某些页面又居中显示,弹出窗口的居中算法也OK,这是为什么呢?

一、解决办法

作为对你负责的态度,必须先告知你决绝办法。

在页面顶端加入以下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意必须是这样的

<!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">

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<%@ include file="/components/common/jscsslib.jsp"%>

<head>

而不能是这样的

<html xmlns="http://www.w3.org/1999/xhtml">

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<%@ include file="/components/common/jscsslib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>

二、错误分析

jquery weebox总结中介绍了weebox的基本使用方法,那么对于weebox弹出框不居中显示的原因,首先我们必须来先看看其setCenterPosition居中算法是否合理。

this.setCenterPosition = function() {
 var wnd = $(window), doc = $(document),
  pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
  minTop = pTop; 

 pTop += (wnd.height() - self.dh.height()) / 2;
 pTop = Math.max(pTop, minTop);
 pLeft += (wnd.width() - self.dh.width()) / 2;
 self.dh.css({top: pTop, left: pLeft});

}

发现算法还是非常ok的,不过请注意doc = $(document)。
前文我也告诉你了weebox不居中显示的解决办法,那么究竟原因关联在哪里呢?

声明必须是 HTML 文档的第一行,位于 标签之前。
声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

虽然这段话也并不能直接表明doctype和窗口居中之间的关系,但从解决办法中可以猜测到,如果不指定 ,那么窗口在计算document的宽高时就不是标准的像素值,这就间接的导致弹出窗口的x、y坐标没有定位准确。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
angular动态表单制作
Feb 23 Javascript
node实现的爬虫功能示例
May 04 Javascript
Vuex入门到上手教程
Jun 20 Javascript
基于iview的router常用控制方式
May 30 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 #Javascript
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
Bootstrap实现翻页效果
Nov 27 #Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
JS使用贪心算法解决找零问题示例
Nov 27 #Javascript
Vue.js实现分页查询功能
Nov 15 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
详解Python 装饰器执行顺序迷思
2018/08/08 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
优秀求职信
2014/05/29 职场文书
户籍证明模板
2014/09/28 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
交通事故责任认定书
2015/08/06 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书