10 개의 무료 JavaScript 모달 창 플러그인
찾을 수 있습니다. 많은 순수한 CSS 모달 그러나이 자바 스크립트와 동일한 컨트롤을 제공하지 않는다.. JavaScript 모달을 사용하면 사용자 정의 애니메이션, UI 입력을 추가하고 사용자 경험을 향상시킬 수 있습니다..
하지만 언제부터 무언가를 디자인해야합니까? JS 라이브러리를 사용할 수 있습니다.? 나는 최고의 무료 자바 스크립트 구동 모달 스크립트 즐겨 찾기를 열거하고 알아 내려면 여기에.
이 모든 것들은 완전 무료 및 오픈 소스, 그래서 코드를 편집하고 필요에 따라 사이트에 맞게 다시 스타일을 지정할 수 있습니다..
1. 딸랑 딸랑
내가 좋아하는 무료 모달 스크립트 중 하나는 Tingle.js. 그 종속성이없는 바닐라 자바 스크립트를 기반으로 작성되었습니다., 따라서 jQuery 또는 Zepto 라이브러리가 필요하지 않습니다..
게다가 꽤 작은 도서관입니다. 맞춤 설정을위한 많은 옵션. 몇 가지 설정만으로 CSS 전환, JavaScript 모달 애니메이션 및 전체 사용자 환경을 변경할 수 있습니다..
Tingle.js는 완전히 접근 가능하고 반응 형, 그래서 그것은 모바일 장치에서 작동하고 오래된 브라우저를 지원합니다..
너는 볼 수있어 GitHub의 모든 문서, 무료 소스 코드와 함께. 또한 데모 링크가있어서 Tingle의 행동 확인하기 귀하의 웹 사이트에 맞는지 확인하십시오..
2. 바닐라 모달
최근에 방금 찾은 모달이 있습니다. 대부분보다 훨씬 간단한. 바닐라 모달 그 이름에 순수한 바닐라 대본 모달에 동력을 공급하면서 CSS 전환.
이 제품은 매우 작고 유연하며 사용자 정의 CSS를 사용하여 창 스타일. 또한 갖는다 자바 스크립트로 변경할 수있는 몇 가지 옵션, DOM 함수 또는 콜백 함수를 실행하기에 완벽합니다..
엿보기 데모 페이지 기본 스타일을 볼 수 있습니다. 정말 기본적인 디자인이기 때문에 프로덕션 사이트에서 사용하기 위해 사용자 지정이 필요합니다.. 하지만 이로 인해 전체 코드 요구 사항이 줄어들 기 때문에 가장 얇은 자바 스크립트 모달 라이브러리 중 하나.
3. plainModal
정말 간단한 스크립트를 원한다면 강력히 추천합니다. plainModal. 그것은 jQuery에 내장, 하지만 사용 가능한 가장 작은 모달 스크립트 중 하나.
그렇습니다 외부 CSS 나 이미지 파일을 사용하지 마라.. JS 스크립트 하나만 있으면됩니다..
plainModal 스크립트가 페이지에 추가되면 모달 버튼을 대상으로 삼다. 너는 가야한다. 이렇게하면 디스플레이 및 모달 인터페이스를 변경할 정도를 제어 할 수 있습니다..
또한 자바 스크립트 한 줄로 모달 설정 이 플러그인의 미니멀리스트 테마 유지하기.
4. Modaal
부정 할 것이 없다. 웹 접근성이 매우 큽니다.. 모든 디자이너의 목표는 보다 포괄적 인 경험 다양한 기기 및 제한 사항으로 전 세계 사람들에게.
와 Modaal, 당신은 완벽한 경험을 얻을 수 있습니다. 견고한 AA 접근성 등급으로 WCAG 2.0 테스트를 통과했습니다.. 메인 페이지에서 몇 가지 코드 문서와 함께 환상적인 예제를 볼 수 있습니다..
전반적으로이 바닐라 자바 스크립트 플러그인을 사용하는 것이 좋습니다. 접근성에 관심이있는 사람이라면. AA 등급은 일부 웹 프로젝트에서 필요할 수 있습니다. 따라서 Modaal은 북마크를 유지하는 데 매우 편리한 스크립트입니다.
5. Scotch JS Modal
Scotch.io의 개발 팀은 코더 용 자습서 및 안내서를 게시합니다. 그들의 작품은 믿을 수 없으며 실제로 Scotch GitHub에서 호스팅되는이 JavaScript 모달 스크립트.
모달은 Ken Wheeler와이 대본에 의해 개발되었습니다. 완전한 튜토리얼을 가지고있다. 당신이 어떻게 작동하는지 배우고 싶다면. 그러나 무료 코드는 대부분의 개발자에게 충분해야합니다. 슈퍼 경량이며 설치가 쉽다.. CodePen에 대한 의존성 및 샘플 데모조차 없습니다..
6. Bootbox.js
가장 빠른 방법 새로운 웹 프로젝트를 시작하십시오. 부트 스트랩을 통과합니다. 강력한 프런트 엔드 프레임 워크로 개발자가 라이브러리에 자체 애드온 생성.
그러한 예가 Bootbox.js, 작은 자바 스크립트 라이브러리, 부트 스트랩의 모달 창 전용으로 설계된. 실제로 대화 상자에서 작동합니다. 사용자가 요청을 기반으로 확인을 클릭하거나 취소 할 수있는 곳.
일반적인 자바 스크립트 대화 상자는 경고 상자와 마찬가지로 끔찍합니다. Bootbox 스크립트는 BS3 / BS4 생태계에서 일하는 모든 사람들을위한 견고한 대안.
다시 말하지만 완전히 무료이고 오픈 소스, 함께 긴 문서 페이지 빨리 일어나서 달리기..
7. iziModal.js
만약 너라면 좀 더 맞춤화 된 솔루션이 필요하다. 체크 아웃 iziModal.js. 이 도구는 완전히 반응하는 ~하도록 설계 모든 최신 브라우저에서 완벽하게 작동.
그런 미적 디자인을 제공하는 다른 모달 스크립트를 아직 찾지 못했습니다. 게이트가 나오면 사실상 모든 웹 사이트에 융합 될 수있는 멋진 UI. 그러나 또한 디자인을 다시 스타일링 당신의 필요에 맞게.
이 플러그인을 기록해 둡니다. jQuery에서 실행됩니다., 그래서 그것은 여기 몇 안되는 것 중 하나입니다. 의존성이있다.. 그러나 iziModal 스타일을 원한다면 세련된 팝 오버 윈도우 비용을 지불하는 데 드는 작은 가격입니다..
8. jQuery 모달
그만큼 jQuery 모달 플러그인 아마 jQuery에서 가장 간단한 모달 스크립트.
그것은에 프로그램 될 수있다 특정 HTML 요소와 자동으로 바인딩 다양한 속성을 기반으로합니다. 또한 키보드 단축키 지원 창을 닫기위한 ESC와 같은.
전체적으로이 플러그인 1KB 미만의 측정 그리고 그것 당신이 상상할 수있는 모든 가능한 브라우저에서 작동합니다.. jQuery 개발자는이 플 러그 인을 저장하여 추가 모서리없이 간단한 모달 스크립트에 빠르게 액세스 할 수있게해야합니다..
9. 피코 모달
바닐라 자바 스크립트로 돌아 가면 피코 모달 라이브러리. 이것은 아마 찾을 수있는 가장 작은 스크립트 중 하나 일 것입니다. 바닐라 자바 스크립트 백본에서 완벽하게 실행.
그것 모든 최신 브라우저를 지원합니다., Android 용 모바일 브라우저 및 iOS 용 모바일 Safari가 있습니다. 심지어 이전 IE 브라우저를 지원하며 IE7로 거슬러 올라갑니다.!
피코 모달의 개발자 작은 JSfiddle 스크립트를 만들었습니다. 어떻게 작동하는지 보여줍니다. 이것은 아주 작은 예이며 클릭 이벤트 또는 다른 것과 연결되지 않음, 그러나 그것은 어렵지 않다. 몇 개의 토글 버튼으로 스크립트하기 이 모달 창을 제대로 실행하려면.
10. 평균
Avgrund 아마도이 목록에서 가장 독특한 모달 중 하나 일 것입니다. 그것은 맞춤 페이지 페이딩 효과, 축소 애니메이션 모달 권리를 가져다주기.
모든 사람이이 애니메이션을 감상하지 않을 것이므로이 스크립트가 모든 웹 사이트에 맞을 것이라고 말할 수는 없습니다. 그러나 그것은 순수한 바닐라 모달 설치가 매우 쉽습니다., CSS와 자바 스크립트 파일 만 있으면된다.이자형.
살펴보기 데모 페이지 어떻게 실행되는지보십시오. 틀림없이 독특한 스타일을 가지고 있습니다. 주의를 끌기 위해 묶인 방금 작동하는 맞춤 애니메이션.
최종 단어
당신이 원하는 것을 무엇이든, 당신의 필요에 맞게이 목록에 뭔가가있을 것입니다. 하지만, 여전히 만족스럽지 않으면 관련된 모달 스크립트에 대한 GitHub 검색 그 밖의 무엇을 찾을 수 있는지 알아보십시오..
