在weebox中有關彈出視窗不居中問題-js教程-PHP中文網

在weebox中有關彈出視窗不居中問題

亚连

發布： 2018-06-23 18:19:43

原創

1825 人瀏覽過

這篇文章主要為大家詳細介紹了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元件（詳細教學）

以上是在weebox中有關彈出視窗不居中問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！