Rumah > Artikel > hujung hadapan web > 在weebox中有关弹出窗口不居中问题

在weebox中有关弹出窗口不居中问题

亚连asal: 2018-06-23 18:19:431850semak imbas

这篇文章主要为大家详细介绍了weebox弹出窗口不居中显示的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

某些页面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">


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

而不能是这样的



<%@ 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">

二、错误分析

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坐标没有定位准确。

上面是我整理给大家的，希望今后会对大家有帮助。

在vue-cli webpack中如何引入jquery（详细教程）

使用JS如何计算两个时间相差数

在js中如何实现上传并压缩图片功能（详细教程）

使用微信小程序如何实现图片上传功能

使用async-validator如何编写Form组件（详细教程）

Atas ialah kandungan terperinci 在weebox中有关弹出窗口不居中问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在vue+canvas中有关excel-like组件如何使用Artikel seterusnya：如何利用Js动态创建div

Artikel berkaitan

Lihat lagi