JavaScript 팝업 DIV 창 레이어를 만드는 방법 effect_javascript 기술

이 튜토리얼에서는 가장 널리 사용되는 언어와 가장 간결한 코드를 사용하여 JavaScript 팝업 DIV 창 레이어 효과를 만드는 방법을 보여 드리겠습니다.

팝업 DIV 창을 만드는 것은 웹사이트/웹페이지 제작 시 가장 흔히 발생하는 문제 중 하나일 수 있습니다. 전통적인 JavaScript 팝업 창은 두 가지 이유로 현재 웹 사이트 디자인 개념에 더 이상 적합하지 않습니다. 첫째, 비친화적입니다. "쾅" 소리가 동반되는 딱딱한 팝업 대화 상자는 사용자 경험에 큰 도전입니다. 둘째, 충분하지 않음과 호환되지 않습니다. 상당수의 브라우저가 이 JS Alert() 메서드를 차단합니다. 따라서 좋은 사용자 경험을 제공하는 웹사이트에는 보다 합리적인 솔루션이 필요합니다. 즉, 매우 적은 양의 HTML 코드, 매우 적은 CSS 코드 및 몇 줄의 JavaScript 코드를 사용하여 브라우저의 기본 팝업 창을 시뮬레이션합니다(즉, 기본 Alert() 인터페이스 및 기능).

구현 원칙:

먼저 팝업 상자의 콘텐츠를 특수 DIV 레이어에 배치한 다음 기본적으로 숨깁니다(예: 처음에는 보이지 않음, CSS를 사용하면 이를 달성할 수 있습니다). 사용자가 링크를 클릭하거나 링크 위로 마우스 커서를 이동하는 등의 작업을 수행하면 모든 페이지 요소 위에 이전에 설정된 숨겨진 레이어가 표시됩니다(JS 작업을 사용하여 구현됨). 또한 사용자가 이 버튼을 클릭하면 창이 닫히는 기능을 수행하도록 팝업 DIV 창에 버튼도 설정하겠습니다.

구현 과정:

위에서 언급했듯이 먼저 특수 DIV 레이어를 만든 다음 팝업 창의 내용을 여기에 넣습니다. 레이어 내부의 DIV. 여기서는 다른 DIV 레이어와 구별하기 위해 ID 이름을 "popupcontent"로 지정합니다.

<div id="popupcontent">DIV 팝업 창 효과입니다!</div>

팝업 창에 대한 CSS 수정 코드:

다음으로 위에서 생성한 DIV 팝업 레이어를 CSS로 아름답게 만들어 보겠습니다. 가장 중요한 매개변수는 오버플로(콘텐츠 오버플로), 가시성(가시성) 및 위치(위치 지정 방법)입니다. 동시에 이 창 효과에 다른 코드도 많이 추가했지만 이는 이 창을 더욱 아름답게 만들고 아름답게 만드는 데에만 사용됩니다. 따라서 우리가 최종적으로 정의한 CSS 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

# 팝업 콘텐츠{
위치: 절대;
오버플로: 숨김
테두리: 1px
배경색:#F9F9F9; :1px solid #333;
padding:5px;
}


위 CSS 코드의 빨간색 부분에서 볼 수 있듯이 이 DIV 레이어의 초기 기본 상태는 보이지 않습니다. .

위 코드는 필요에 따라 아름답게 꾸밀 수 있지만 위치, 가시성, 오버플로 세 가지 속성을 꼭 유지하시기 바랍니다.


JavaScript 코드는 팝업 창을 실행하고 표시하는 데 사용됩니다.
이것은 아마도 이 튜토리얼에서 가장 중요하고 흥미로운 부분일 것입니다. 다음으로 위의 DIV 팝업 창을 표시하고 숨기는 두 가지 프로세스 함수를 작성하겠습니다. 물론 이 두 함수에는 몇 가지 주요 논리가 포함됩니다.

process 함수에 순차적으로 포함되어야 하는 로직:

화면에서 JavaScript 팝업 창의 표시 위치(위치 지정)를 계산합니다.
상태 표시줄( 또는 버튼) 팝업 창에서 열려 있는 창을 닫는 데 사용됩니다.
팝업 창을 표시합니다.

간단함을 위해 이 예시에서는 디스플레이 위치를 위쪽: 200, 왼쪽: 200으로 설정했습니다. 즉, 브라우저 콘텐츠 상자의 왼쪽 상단을 좌표로 삼아 아래쪽으로 200PX, 왼쪽으로 200PX 오프셋합니다.

창 길이와 창 너비라는 두 가지 매개변수를 포함하여 디스플레이 기능의 매개변수에서 팝업 창의 크기를 설정할 수 있습니다.

이 예제에서 코드를 다시 개발해야 한다면 특히 주의가 필요한 곳이 있는데, 바로 팝업창의 DIV 레이어의 DOM 객체를 얻을 수 있다는 것입니다. 아래의 getElementById 함수를 통한 ID 이름입니다. "Popcontent"의 DOM 개체입니다.

코드 복사 코드는 다음과 같습니다.

var popUp = document.getElementById("popupcontent ");

이 (팝업 창) DOM 객체를 얻은 후 JS 코드에서 창의 상대적 위치와 창 크기를 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

popUp.style.top = "200px" ;// 브라우저 콘텐츠 영역 상단에서 창의 오프셋 값

popUp.style.left = "200px";//브라우저 콘텐츠 영역의 가장 왼쪽에서 창 오프셋 값

popUp.style.width = w "px";//창 너비

popUp.style.height = h "px";//창 높이


다음으로, 창이 열려 있을 때 닫을 수 있도록 창에 "닫기" 버튼을 추가해야 합니다. 이 기능을 완벽하게 구현하려면 먼저 팝업 창 DIV에 내용을 저장할 전역 변수를 선언해야 합니다. 한 페이지에 서로 다른 콘텐츠가 포함된 여러 팝업 창을 표시하는 경우 버튼을 이러한 DIV 레이어에 반복적으로 복사할 필요가 없으므로 동작 로직이 단순화됩니다.

코드 복사 코드는 다음과 같습니다.

if (baseText == null) baseText = popUp.innerHTML;

popUp. innerHTML = baseText

"<div id="statusbar"><button onclick="hidePopup();">창 닫기 <button></div>"

마지막으로 주의해야 할 점은 '닫기' 버튼의 위치입니다. 이는 구현하기 쉽습니다. 버튼 개체의 위쪽 공백 부분을 설정하기만 하면 됩니다. 공백 부분의 값은 전체 팝업 창의 DIV 높이보다 약간 작게 설정할 수 있습니다.

이제 모든 동작 로직을 설명했습니다. 최종 팝업창 표시 기능의 전체 코드는 다음과 같습니다.

복사 code 코드는 다음과 같습니다.

var baseText = null

function showPopup(w,h){
var popUp = document.getElementById("popupcontent");
popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w "px"; 🎜>popUp.style.height = h "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText "<div id="statusbar">< 버튼 onclick="hidePopup();
">창 닫기<버튼></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) "px" ;
popUp.style.visibility = "visible";
}

팝업 창 숨기기:
팝업창을 숨기는 과정은 꽤 간단합니다. 먼저 팝업 창 DIV의 DOM 개체를 얻은 다음 해당 속성을 "hidden"으로 설정하면 됩니다.

코드 복사 코드는 다음과 같습니다.

function hidePopup(){
var popUp = document .getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

최종적으로 팝업을 구현하려면 HTML 코드를 확장하세요. up 효과:
우리가 해야 할 일은 링크나 버튼의 해당 이벤트에 JS 함수 "showPopup()"을 추가하는 것뿐입니다.

예를 들어 마우스가 특정 연결 위로 이동할 때 창을 표시해야 하는 경우:

<a href="#" onmouseover="showPopup(300,200) > ;팝업 열기</a> ;


연결을 마우스로 클릭할 때 창을 띄워야 합니다:
<a href="#" onclick=" showPopup(300,200);" >팝업 열기</a>