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 相关文章推荐
js的表单操作 简单计算器
Dec 29 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
js实现导航跟随效果
Nov 17 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
Vue.js实现数据响应的方法
2018/08/13 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python读取Excel的方法实例分析
2015/07/11 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python中map()函数的使用方法示例
2017/09/29 Python
深入浅出学习python装饰器
2017/09/29 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
解决Python中回文数和质数的问题
2019/11/24 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
python算的上脚本语言吗
2020/06/22 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
大学生优秀团员事迹材料
2014/01/30 职场文书
第二课堂活动总结
2014/05/07 职场文书
反腐倡廉标语
2014/06/24 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers