ホームページ >ウェブフロントエンド >jsチュートリアル >weebox でポップアップ ウィンドウが中央に配置されない問題
weebox でポップアップ ウィンドウが中央に配置されない問題
- 亚连オリジナル
- 2018-06-23 18:19:431893ブラウズ
この記事では主にweeboxのポップアップウィンドウが中央に表示されない問題の解決策を詳しく紹介しますので、興味のある方は参考にしてください
weeboxのポップアップウィンドウが表示されない問題の解決策を紹介します。一部のページでは中央に表示されますが、ポップアップウィンドウの中央揃えアルゴリズムも問題ありません。なぜでしょうか。
1. 解決策
あなたに対する責任ある態度として、まず決定的な解決策をお伝えしなければなりません。
次のコードをページの先頭に追加します:
<!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">
2. エラー分析
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});
} は、アルゴリズムはまだ非常に大丈夫であることがわかりましたが、doc = $(document) に注意してください。
前回の記事でweeboxが中央に表示されない問題の解決策もお伝えしましたが、原因は何でしょうか？
宣言は、HTML ドキュメントの最初の行、タグの前になければなりません。
宣言は HTML タグではなく、ページをどのバージョンの HTML で記述するかを Web ブラウザーに指示する命令です。
HTML 4.01 は SGML に基づいているため、HTML 4.01 では宣言は DTD を参照します。 DTD は、ブラウザーがコンテンツを正しく表示できるようにマークアップ言語のルールを指定します。
この文章はdoctypeとウィンドウのセンタリングの関係を直接示しているわけではありませんが、これが指定されていない場合、ドキュメントの幅と高さを計算するときにウィンドウが標準のピクセル値にならないことが解決策から推測できます。これにより、間接的にポップアップ ウィンドウの x 座標と y 座標が不正確な位置に配置されます。
上記は私があなたのためにまとめたものです。
関連記事:
vue-cli webpackにjqueryを導入する方法(詳細チュートリアル)
画像をアップロードして圧縮する機能を実装する方法js (詳細チュートリアル)
WeChat アプレットを使用した画像アップロード機能の実装方法
async-validator を使用した Form コンポーネントの作成方法 (詳細チュートリアル)
以上がweebox でポップアップ ウィンドウが中央に配置されない問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。