사용자 정의 대화 상자의 즐거움

물론 사용자 정의 대화 상자가 있어야 합니다! 얼마나 재미있나요?

관심 있으신 분들을 위해 이 영상을 보았는데 비교적 쉽게 과정을 진행할 수 있었습니다.

어떻게 이루어졌는가

먼저 html로 구조를 만듭니다.
오버레이를 사용하여 배경이 나타날 때 배경을 차단할 수 있습니다. 또한 내부에 더 많은 요소가 포함된 상자를 만들어야 합니다. 이를 수행하는 방법은 다음과 같습니다.

onclick 이벤트와 함께 추가된 버튼도 확인하세요.

---

재미있는 부분

CSS로 스타일을 추가하여 새 상자를 맞춤설정하세요.

나만의 대화 상자를 만드는 것은 매우 흥미로웠습니다. 나는 버튼, 색상, 모양을 조작하는 것을 좋아합니다. 시간을 내어 그것을 알아내게 되어 매우 기쁩니다. 재미있는 미니 프로젝트예요!

---

기능 설정

1. 자바스크립트에서 클릭 시 대화 상자를 렌더링하는 사용자 정의 함수를 만듭니다.
2. ID를 사용하여 크기를 정의하고 DOM의 요소에 액세스하는 변수를 만듭니다.
3. 상자 요소를 파악한 후 창 너비를 기준으로 2로 나눈 값을 사용하여 팝업 대화 상자를 중앙에 배치할 수 있습니다.

이 대화 상자에는 세 가지 영역이 있지만 필요에 따라 항목을 추가하거나 뺄 수 있습니다. 여기서 진짜 장애물은 기능입니다.

• 각 고유 ID에 .innerHTML을 사용하여 상자에 동적으로 정보를 추가합니다.
• this.render는 클릭 시 정보를 렌더링합니다.
• alert.render는 customAlert 기능을 트리거하는 클릭 시 호출됩니다.

this.ok 기능은 "팝업" 상자의 버튼을 클릭할 때 오버레이와 대화 상자가 제거되는지 확인합니다. 우리는 그것이 꼭 필요합니다. 이는 둘 다의 스타일을 없음으로 설정하여 수행됩니다.

---

대단함 - 한번 시도해 보세요

저는 이 일을 하면서 정말 즐거웠고, 또 늦게까지 깨어 있었습니다. XD

위 내용은 사용자 정의 대화 상자의 즐거움의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!