Home > Article > Web Front-end > Problems with pop-up windows not being centered in weebox

Problems with pop-up windows not being centered in weebox

亚连Original: 2018-06-23 18:19:431835browse

This article mainly introduces in detail the solution to the problem that the weebox pop-up window is not displayed in the center. It has a certain reference value. Interested friends can refer to it.

The weebox pop-up window is not displayed on some pages. It is displayed in the center, some pages are displayed in the center, and the centering algorithm of the pop-up window is also OK. Why is this?

1. Solution

As a responsible attitude towards you, I must first inform you of the decisive solution.

Add the following code to the top of the page:

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

Note that it must be like this

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

but not like this



<%@ 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. Error Analysis

jquery weebox summary The basic usage of weebox is introduced. So for the reason why the weebox pop-up box is not displayed in the center, first we must first see whether its setCenterPosition centering algorithm is reasonable.

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

}

I found that the algorithm is still very ok, but please pay attention to doc = $(document).
I also told you the solution to the problem that the weebox is not displayed in the center, so what is the reason?

The declaration must be the first line of the HTML document, before the tag. The
declaration is not an HTML tag; it is an instruction that instructs the web browser as to which version of HTML the page should be written in.
In HTML 4.01, declarations reference DTDs because HTML 4.01 is based on SGML. A DTD specifies the rules for a markup language so that browsers can render content correctly.

Although this paragraph does not directly indicate the relationship between doctype and window centering, it can be guessed from the solution that if it is not specified, the window will be calculated when the width and height of the document are calculated. It is not a standard pixel value, which indirectly causes the x and y coordinates of the pop-up window to be inaccurately positioned.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to introduce jquery in vue-cli webpack (detailed tutorial)

How to calculate two times using JS Difference number

How to implement the function of uploading and compressing images in js (detailed tutorial)

How to implement the image upload function using WeChat applet

How to write Form components using async-validator (detailed tutorial)

The above is the detailed content of Problems with pop-up windows not being centered in weebox. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use excel-like components in vue+canvasNext article：How to use excel-like components in vue+canvas

See more

Problems with pop-up windows not being centered in weebox

Related articles