> 웹 프론트엔드 > JS 튜토리얼 > NeoPopup - 최신 팝업 모듈

NeoPopup - 최신 팝업 모듈

Linda Hamilton
풀어 주다: 2025-01-04 19:15:39
원래의
318명이 탐색했습니다.

NeoPopup은 세련되고 전문적인 웹 인터페이스를 위해 설계된 현대적이고 사용자 정의가 가능하며 반응성이 뛰어난 3D 팝업 모듈입니다. 테마, 애니메이션 및 사용자 정의 옵션을 갖춘 이 모듈을 사용하면 웹사이트에 멋진 팝업을 손쉽게 추가할 수 있습니다.


특징 ?

  • 3D 팝업 디자인: 최신 UI를 위한 눈길을 끄는 3D 애니메이션.
  • 사용자 정의 가능: 텍스트, 색상, 크기, 테마 등을 쉽게 조정할 수 있습니다.
  • 자동 닫기: 기간을 맞춤 설정할 수 있는 자동 닫기 기능(옵션).
  • 지속 모드: 로컬 저장소를 사용하여 사용자 기본 설정을 기억합니다.
  • 반응형: 모든 기기와 화면 크기에서 원활하게 작동합니다.
  • 밝은/어두운 테마: 테마 선택 지원 기능이 내장되어 있습니다.
  • 포지셔닝: 화면 구석구석에 팝업을 표시합니다.

미리보기?

NeoPopup - The Modern Popup Module


설치?

저장소를 복제하거나 모듈 파일을 다운로드하세요.

git clone https://github.com/BOSS294/NeoPopup.git
로그인 후 복사
로그인 후 복사

프로젝트에 JavaScript 파일을 포함하세요.

<script src="path/to/developmentPopup.js"></script>
로그인 후 복사
로그인 후 복사

용법 ?

기본 예

developmentPopup.init({
    title: "Welcome to NeoPopup!",
    body: "Thank you for exploring the modern 3D popup module.",
    buttonText: "Learn More",
    buttonCallback: () => window.open('https://github.com/BOSS294/NeoPopup', '_blank'),
});
로그인 후 복사

사용 가능한 옵션

Option Type Default Description
title string "Under Development" Title of the popup.
body string "Oops!" Body content (HTML supported).
buttonText string "Check Latest Updates" Text for the main button.
buttonCallback function null Callback function for the main button click.
position string "bottom-right" Popup position: top-right, top-left, bottom-right, or bottom-left.
theme string "dark" Theme for the popup: dark or light.
colors object {} Custom colors: { background, text, button }.
size object {} Size options: { width, height }.
animation string "slide" Animation type.
autoClose boolean false Automatically close the popup.
closeDuration number 5000 Auto-close duration in milliseconds.
persistent boolean false Prevent popup from showing repeatedly using local storage.

스타일링?

NeoPopup의 내장 스타일을 포함하려면 다음을 확인하세요.

  • DP-popup-wrapper div가 HTML에 포함되어 있습니다.
  • NeoPopup에는 3D 애니메이션, 그림자 효과 및 사용자 정의 가능한 테마가 포함되어 있습니다.

디자인을 추가로 사용자 정의하려면 포함된 CSS를 수정하세요.

git clone https://github.com/BOSS294/NeoPopup.git
로그인 후 복사
로그인 후 복사

지속 모드의 예

<script src="path/to/developmentPopup.js"></script>
로그인 후 복사
로그인 후 복사

기여?

제보를 언제나 환영합니다! 도움을 드릴 수 있는 방법은 다음과 같습니다.

  1. 저장소를 포크합니다.
  2. 기능 브랜치를 생성하세요: git checkout -b feature/AmazingFeature.
  3. 변경 사항을 커밋합니다: git commit -m "Add some AmazingFeature".
  4. 브랜치로 푸시: git push 원본 기능/AmazingFeature.
  5. 풀 요청을 엽니다.

지원하다 ?

질문이나 기능 요청이 있는 경우:

  • 이메일: mayankchawdhari@gmail.com
  • GitHub 문제: NeoPopup 문제

라이센스?

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.


Mayank Chawdhari의 ❤️으로 개발되었습니다. ?

위 내용은 NeoPopup - 최신 팝업 모듈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿