jquery 모달 대화 상자 최종 버전 구현 code_jquery

페이지를 스크롤할 때 스크롤 막대가 화면 중앙에 고정되어 있기 때문에 모달 대화 상자에는 두 가지 유형의 콘텐츠가 있는데, 하나는 iframe 도입이고 다른 하나는 HTML 문 삽입입니다. 이는 웹사이트 개발에 매우 ​​일반적으로 사용되며 이 플러그인을 사용하는 것은 매우 간단합니다. 달리기 효과를 살펴보겠습니다.

플러그인 사용법
1. 먼저 스타일 파일을 소개하고, 자세한 코드는 다음과 같습니다.

내부의 ID를 잊지 마세요. 플러그인 스킨을 전환하는 데 사용됩니다.
2. 그런 다음 jQuery의 js 파일을 소개합니다.
3. 모달 대화상자 플러그인은 다음과 같습니다.

4. 코드는 다음과 같습니다.

Click me--modal 대화 상자

5. 클릭 모달 대화 상자를 id가 있는 div에 바인딩하는 JavaScript 코드를 작성합니다. "diagx"의 구체적인 코드는 다음과 같습니다

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

이 플러그인의 기본 매개변수 및 투명도 Intopacity 표현 모드 대화 상자 배경(즉, 전체 페이지 마스크 레이어)은 "0.2"입니다. 전체 예제에 대한 전체 HTML 코드는 다음과 같습니다.

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

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






모달 대화상자

나를 클릭하세요.--모달 대화상자



이 코드가 실행 중일 때 ID가 "diagx"인 div 레이어를 클릭하면 모달 대화 상자가 나타납니다.
플러그인의 소스코드는 다음과 같이 다운로드 받으실 수 있습니다. 다운로드하여 사용하시고, 개선사항이 있으면 꼭 알려주시면 개선하도록 하겠습니다. 감사해요.

패키지 다운로드 주소

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.