weebox でポップアップウィンドウが中央に配置されない問題-jsチュートリアル-php.cn

weebox でポップアップウィンドウが中央に配置されない問題

亚连

リリース： 2018-06-23 18:19:43

オリジナル

1848 人が閲覧しました

この記事では主に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を使用して2つの時間の差を計算する方法

画像をアップロードして圧縮する機能を実装する方法js (詳細チュートリアル)

WeChat アプレットを使用した画像アップロード機能の実装方法

async-validator を使用した Form コンポーネントの作成方法 (詳細チュートリアル)

以上がweebox でポップアップウィンドウが中央に配置されない問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。