jquery.edbox 플러그인 사용 방법 정보

jquery.edbox.js는 가벼운 jquery 반응형 모달 창 플러그인입니다. 이 jquery 모달 창 플러그인을 사용하면 반응형, 애니메이션 및 AJAX 기반 모달 대화 상자 효과를 쉽게 만들 수 있습니다.

기능은 다음과 같습니다.

CSS를 통해 모달 창의 스타일을 변경할 수 있습니다.

모달 창의 머리글 및 바닥글 내용을 사용자 정의할 수 있습니다.

로딩 효과를 맞춤설정할 수 있습니다.

HTML, 텍스트, 이미지, AJAX 콘텐츠 등 다양한 형식의 콘텐츠를 지원합니다.

성공, 정보, 경고, 위험의 4가지 경고 시나리오 모드를 지원합니다.

모달 창 열기 및 닫기에 대한 사용자 정의 가능한 애니메이션.

콜백 방법을 지원합니다.

Installation

npm 또는 Yarn을 통해 jquery.edbox.js 플러그인을 설치할 수 있습니다.

npm install jquery.edbox

yarn add jquery.edbox

사용 방법

페이지에 edbox.css 파일, jquery 및 jquery.edbox.js 파일을 소개합니다.

<link href="dist/edbox.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.edbox.js"></script>

HTML 구조

모달 창을 사용하는 가장 간단한 방법은

를 모달 창 콘텐츠의 컨테이너로 사용하는 것입니다. 여기에는 HTML, 텍스트, 이미지 및 AJAX 콘텐츠가 포함될 수 있습니다. 배치.

<p id="target">模态窗口内容</p>

그런 다음 하이퍼링크나 버튼을 통해 모달 창을 실행하세요.

<ahref="#"edbox data-box-target="#target">打开模态窗口</a>

초기화 플러그인

페이지 DOM 요소가 로드된 후 edbox() 메서드를 통해 모달 창 플러그인을 초기화합니다.

$('.trigger-link').edbox();

모달 창에 HTML, 그림 및 AJAX 콘텐츠 로드

모달 창에 HTML 콘텐츠를 로드하는 방법은 다음과 같습니다. data-box-html 속성에 HTML 콘텐츠를 입력합니다.

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>

$('.trigger-link').edbox();

ATION 사진을 추가하는 방법은 다음과 같습니다. 플러그인은 다음과 같습니다:

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>

위 내용은 jquery.edbox 플러그인 사용 방법 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!