집 > 기사 > 웹 프론트엔드 > 팝업 창이 weebox의 중앙에 위치하지 않는 문제

팝업 창이 weebox의 중앙에 위치하지 않는 문제

亚连원래의: 2018-06-23 18:19:431850검색

이 글에서는 weebox 팝업 창이 중앙에 표시되지 않는 문제에 대한 해결 방법을 주로 자세히 소개합니다. 참고할만한 가치가 있습니다. 관심 있는 친구는 참고하세요

weebox 팝업 창이 표시되지 않습니다. 일부 페이지에서는 중앙에 표시되는데, 팝업창의 중앙 정렬 알고리즘도 괜찮은 이유는 무엇인가요?

1. Solution

당신을 향한 책임감 있는 태도로 결정적인 해결책을 먼저 말씀드려야겠습니다.

페이지 상단에 다음 코드를 추가하세요:

<!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 버전을 지시하는 지침입니다.
HTML 4.01은 SGML을 기반으로 하기 때문에 HTML 4.01에서 선언은 DTD를 참조합니다. DTD는 브라우저가 콘텐츠를 올바르게 렌더링할 수 있도록 마크업 언어에 대한 규칙을 지정합니다.

이 구절은 doctype과 창 중심 맞추기의 관계를 직접적으로 나타내지는 않지만, 이를 지정하지 않으면 문서의 너비와 높이를 계산할 때 창이 표준 픽셀 값이 되지 않을 것이라는 솔루션을 통해 추측할 수 있습니다. 이로 인해 팝업 창의 x 및 y 좌표가 부정확하게 배치됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

팝업 창이 weebox의 중앙에 위치하지 않는 문제

관련 기사