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

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

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

구현 원칙:

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

구현 과정:

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

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

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

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


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

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

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

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

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

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


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

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