Problèmes avec les fenêtres pop-up qui ne sont pas centrées dans la weebox-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Problèmes avec les fenêtres pop-up qui ne sont pas centrées dans la weebox

Jun 23, 2018 pm 06:19 PM

Cet article présente principalement en détail la solution au problème selon lequel la fenêtre pop-up weebox n'est pas affichée au centre. Elle a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Pop-up Weebox. la fenêtre ne s'affiche pas sur certaines pages. Elle est affichée au centre, certaines pages sont affichées au centre et l'algorithme de centrage de la fenêtre contextuelle est également OK. Pourquoi ?

1. Solution

Par attitude responsable envers vous, je dois d'abord vous informer de la solution décisive.

Ajoutez le code suivant en haut de la page :

1	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

Copier après la connexion

Notez qu'il doit être comme ça

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
<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>

Copier après la connexion

mais pas comme ça

<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"%>
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
<head>

Copier après la connexion

2. Analyse des erreurs

L'utilisation de base de weebox est présentée dans le résumé de jquery weebox C'est donc la raison pour laquelle la boîte de dialogue weebox n'est pas affichée dans le. center, nous devons d’abord jeter un œil à son algorithme de centrage setCenterPosition. Est-ce raisonnable ?

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});
 
}

Copier après la connexion

J'ai trouvé que l'algorithme est toujours très bon, mais faites attention à doc = $(document).
Je vous ai également expliqué la solution au problème que la weebox ne s'affiche pas au centre dans l'article précédent, alors quelle en est la raison ? La déclaration

doit être la première ligne du document HTML, avant la balise. La déclaration
n'est pas une balise HTML ; c'est une instruction destinée au navigateur Web indiquant dans quelle version HTML la page doit être écrite.
Dans HTML 4.01, les déclarations font référence à des DTD car HTML 4.01 est basé sur SGML. Une DTD spécifie les règles d'un langage de balisage afin que les navigateurs puissent restituer correctement le contenu.

Bien que ce paragraphe n'indique pas directement la relation entre le doctype et le centrage de la fenêtre, on peut deviner à partir de la solution que si elle n'est pas spécifiée, la fenêtre sera calculée lorsque la largeur et la hauteur du Le document est calculé. Il ne s'agit pas d'une valeur de pixel standard, ce qui entraîne indirectement un positionnement inexact des coordonnées x et y de la fenêtre contextuelle.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment introduire jquery dans le webpack vue-cli (tutoriel détaillé)

Comment calculer deux fois en utilisant JS Numéro de différence

Comment télécharger et compresser des images en js (tutoriel détaillé)

Comment utiliser l'applet WeChat pour télécharger des images

Comment écrire des composants de formulaire à l'aide de async-validator (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn