헤르메스 LIFE

[Modal] Javascript, jQuery 기반의 Open Source Modal Plugin 본문

JSP&JavaScript&HTML

[Modal] Javascript, jQuery 기반의 Open Source Modal Plugin

헤르메스의날개 2023. 5. 6. 01:11
728x90

모달창(Modal Window) 이란?

모달창(Modal Windows) (모달 상자 또는 모달 대화 상자라고도 함)은 대화상자 또는 팝업창 유형으로 화면의 사용자 인터페이스 상단에 나타나는 UI요소 입니다. 그것들은 보통 html, javascript, css의 조합으로 설계됩니다. 대부분의 경우, 화면의 중요한 부분을 차지하는 대화창 모양을 가지므로, 사용자가 중요 메시지를 놓칠 수 없습니다. 사용자의 주의를 끌도록 배치된 모달창을 통해 환영 메시지 또는 앱 내의 중요한 메시지를 전달 할 수 있습니다.

모달창은 조회 조건 및 도움말, 툴팁과 같은 적절한 순간에 크게 활용되고 있습니다.

개인적으로 생각하는 업무에 적용이 가능한 Modal 팝업의 조건

1. Modal 팝업이 오픈되면 오픈된 창 이외의 창에 접근 할 수 없어야 합니다.

2. Modal 팝업은 close 이벤트 등에 의해 닫혀야 합니다. 자동으로 닫히는 기능은 Optional 기능입니다.

2. Modal 팝업안에서 Modal 팝업을 추가적으로 생성할 수 있어야 합니다.

Modal 기능을 구현하던 중 Plugin 을 검색했더니 의미있는 Plugin 들을 발견할 수 있었습니다. 아래는 제가 찾은 Plugin의 모음입니다.

참조하세요.

1. jQuery UI Dialog ( https://jqueryui.com/dialog/ )

 

Dialog | jQuery UI

Dialog Open content in an interactive overlay. The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be

jqueryui.com

jQuery 기반의 화면UI 프로젝트라면 좋은 대안이 될 수 있습니다.

jQuery UI는 지원이 잘되고 널리 사용되며, 쉽게 개발자가 수정할 수 있는 경량 jQuery 기반 프론트엔드 프레임워크입니다. 전체 프레임워크에는 단순한 모델 이상의 기능이 포함되어 있지만, 대화 상자만 있으면 다운로드 페이지에서 프레임워크의 각 모듈을 개별적으로 쉽게 사용할 수 있습니다.

MIT 라이센스를 이용한 OpenJS Foundation 라이센스입니다. ( 공짜라는 얘기 입니다. )

2. jQuery Modal ( https://jquerymodal.com/ )

 

jQuery Modal

This example demonstrates how visually customizable the modal is. This example shows how modals are centered automatically. It also demonstrates how a vertical scrollbar appears whenever the modal content overflows. More! Lorem ipsum dolor sit amet, consec

jquerymodal.com

jQuery(샘플소스가 3.0.0 버전이였습니다.) 기반의 Plugin 입니다.

jQuery 프로젝트의 일부는 아닙니다.

 

간단한 마크업을 통해 쉽게 스타일을 지정하고, fade animation을 추가하고, jQuery 이벤트를 사용하여 개발자가 기능을 추가 할 수 있다는게 가장 큰 장점이라고 할 수 있습니다. 또한 초경량(약 1K)입니다. 클릭 또는 ESC Key로 닫을 수 있습니다.

MIT 라이센스입니다.

3. iziModal ( https://izimodal.marcelodolza.com//#modal-default )

현재 2022년 1.6.1 버전이 최신입니다.( https://github.com/marcelodolza/iziModal )

빠르고, 반응하며, Animated( 위로 부터 떨어지는 모달창, Progress Bar 등등 ) , 가볍습니다.

팝업창을 크기를 지정할 수 있고, Full Screen 기능을 지원합니다.

alert 메시지 및 경고 메시지 창을 지원합니다.

개발자가 추가적인 기능을 추가할 수 있습니다.

Chrome, Firefox, Opera, Safari, IE9+ and Edge에서 테스트 되었다고 합니다.

Apache 라이센스 2.0 입니다.

4. sweetalert2 ( https://sweetalert2.github.io/ )

 

SweetAlert2

A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

sweetalert2.github.io

jQuery 기반이 아닙니다. 종속성이 전혀 없는 순수 Javascript Source 입니다.

다양한(?) 스폰서에 의해 유지되는 Open Source 인 모양입니다. 덕분에 개발자가 지속적으로 소스를 관리하고 있습니다.

예쁘고고, 반응성이 뛰어나고, 사용자 지정이 가능하며, WAI-ARIA의 대체품. 의존성이 없습니다.

React, Vue.js, Angular 를 지원할 수 있습니다.

MIT 라이센스입니다.

5. Magnific Popup ( https://dimsemenov.com/plugins/magnific-popup/ )

https://dimsemenov.com/plugins/magnific-popup/

 

Magnific Popup: Responsive jQuery Lightbox Plugin

Light and open source responsive lightbox plugin with focus on performance, for jQuery and Zepto.js. High-DPI (retina) display support, fast tap for touch devices.

dimsemenov.com

jQuery(샘플소스가 1.9.1 버전이였습니다.) 기반의 Plugin 입니다.

대부분의 API( Image, Iframe, Inline, Ajax, Animation 등등 )를 제공합니다..

MIT 라이센스입니다.

2022년 이후로 수정이력이 없습니다. ( https://github.com/dimsemenov/Magnific-Popup/ )

6. Vex ( https://www.sitepoint.com/14-jquery-modal-dialog-boxes/ )

 

14 jQuery Modal Dialog Boxes — SitePoint

A great way to show information to your user, Matt Burnet presents 14 stylish and configurable jQuery Modal Dialog boxes that you can drop into any project.

www.sitepoint.com

jQuery 기반이 아닙니다. ES5 호환 환경에서 실행되며 classLIst 및 Object.assign에 대한 polyfill을 포함하는 Javascript Source 입니다.

스타일이 쉽고, 구성이 간단하며, 모바일 사용이 가능한 대화 라이브러리 입니다. 경량의 소스로 명화하고 강단한 API를 가지고 있습니다.

IE9 이상, Edge 13 이상, Firefox 21 이상, 크롬 23 이상, Safari 6 이상, Opera 15 이상 지원합니다.

MIT 라이센스입니다.

7. leanModal.js (  http://leanmodal.finelysliced.com.au/ )

 

leanModal - a JQuery modal plugin that works with your CSS

Bare bones modal dialog windows. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo

leanmodal.finelysliced.com.au

jQuery(샘플소스가 1.6.1 버전이였습니다.) 기반의 Plugin 입니다. css와 같이 동작합니다.

모달 창에서 처리할 수 있는 앱과 관련된 모든 대화 상자, 경고, 패널 등을 위해 제작되었습니다. 숨겨진 내용을 처리하도록 설계되었으며, 표시 및 위치 지정을 제외하고는 대상 요소에 스타일을 적용하지 않습니다.

장점은 숨겨진 페이지 콘텐츠에 강력하, 경량화, 이미지 프리, 한 페이지에 여러게의 인스턴스,  로그인, 등록 및 알림 패널 등에 적합합니다.

MIT, GPL 라이센스입니다.

단점은 2021년 이후로 수정이력이 없습니다. ( https://github.com/FinelySliced/leanModal.js )

8. NOTY ( https://ned.im/noty/#/ )

 

NOTY - a dependency-free notification library

 

ned.im

jQuery 기반이 아닙니다.

창을 자유롭고, 쉽게 화면에 위치 설정할 수 있습니다. 

스폰서에 의해 유지되고 있습니다. 그래서 인지 최근까지 소스 관리는 잘되고 있습니다.

종속성이 없고, CSS 애니메이션, animate.css, mojs, bounce.js, velocity 및 기타 애니메이션 라이브러리를 지원합니다.

사용자 지정 템플릿 및 알림확인, 2개의 닫기 옵션: 클릭, 버튼등을 지원합니다.

ES6 와 Babel 과 Webpack 지

V2 버전은 jQeury (샘플소스가 1.7 버전이였습니다.)를 이용해서 추가적인 기능을 구현한 것 같습니다.( https://ned.im/noty/v2/ ) 

 

noty - a jQuery Notification Plugin

 

ned.im

MIT 라이센스입니다.

9. ColorBox ( http://www.jacklmoore.com/colorbox/ )

 

 

Colorbox - a jQuery lightbox

Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin for jQuery View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog)   Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in F

www.jacklmoore.com

jQuery(샘플소스가 1.10.2 버전이였습니다.) 기반의 Open Source Plugin 입니다.

이미지를 표시하기 위해 라이트 박스 플러그인으로 설계되어, 모달 대화 시스템의 모든 요구를 충족시켜줍니다.

사진, 그룹화, 슬라이드쇼, Ajax, inline and iframe 등의 컨텐츠를 지원하며, 경량의 소스를 가집니다.

css를 통해 스타일링이 가능하고, 소스파일을 변경하지 않고 콜백 및 이벤트 후크로 확장할 수 있습니다.

사진 그룹에서는 예정된 이미지를 미리 로딩해서 사용하며, 현재 백만개 이상의 웹사이트에서 사용하고 있습니다.

MIT 라이센스입니다.

단점은 2021년 이후로 수정이력이 없습니다. ( https://github.com/jackmoore/colorbox )

10. ARIA ( https://a11y.nicolas-hoffmann.net/modal/ )

 

 

jQuery simple and accessible modal window, using ARIA - By Nicolas Hoffmann

This jQuery plugin will provide you a simple and accessible modal window using ARIA.

a11y.nicolas-hoffmann.net

jQuery(샘플소스가 1.12.4 버전이였습니다.) 기반의 Open Source Plugin 입니다.

키보드 동작기능(ESC Key를 이용해서 팝업을 닫을 수 있음.)이 포함 되어 있으며, HTML5에서 동작됩니다. 필요한 경우  css로 스크롤을 제거할 수 있으며, 일반 모달창의 경우 모달창을 사용하지 않으면 코드에 추가적인 소스코드를 작성하지 않아도 됩니다.

MIT 라이센스입니다.

단점은 2020년 이후로 수정이력이 없습니다. ( https://github.com/nico3333fr/jquery-accessible-modal-window-aria )

11. popModal ( https://vadimsva.github.io/popModal/ )

 

popModal

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur

vadimsva.github.io

jQuery 기반의 Open Source Plugin 입니다. 6개의 라이브러리로 구성되어 있습니다.

popModal - 상위요소 근처에 표시되는 팝업 창입니다. 요소를 클릭하여 호출됩니다.

notifyModal - 알림팝업, 모든 요소 위에 표시됩니다. 이벤트에 의해 호출되고 일정 시간 후 숨김

hintModal - 상위 요소 근처에 근처에 표시되는 도구 설명입니다. 마우스로 요소를 가리키고 요소가 포커스를 잃은 후 숨깁니다
dialogModal - 모든 요소 위에 표시되는 큰 내용 또는 내용 모음에 대한 모달 대화 상자입니다. 요소를 클릭하여 호출됩니다
titleModal - 상위 요소 근처에 표시되는 도구 설명은 기본 제목을 바꿉니다. 마우스로 요소를 가리키고 요소가 포커스를 잃은 후 숨깁니다
confirmModal - 모든 요소 위에 표시되는 경고 또는 내용 확인을 위한 모달 대화 상자. 요소를 클릭하여 호출됩니다.

MIT 라이센스입니다.

단점은 2018년 이후로 수정이력이 없습니다. ( https://github.com/vadimsva/popModal )

12. animatedModal.js ( https://joaopereirawd.github.io/animatedModal.js/ )

 

animatedModal.js

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.

joaopereirawd.github.io

jQuery(샘플소스가 1.11.1 버전이였습니다.)  기반의 Open Source Plugin 입니다.

css3 을 이용한 전체 화면 모드와 Animation 전환 기능이 있습니다. 추가적인  Animation 효과를 를 정의 할 수 있습니다.

MIT 라이센스입니다.

단점은 기능이 단순하고, 2018년 이후로 수정이력이 없습니다. ( https://github.com/joaopereirawd/animatedModal.js )

13. REMODAL ( https://vodkabears.github.io/remodal/# )

 

Remodal

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

vodkabears.github.io

jQuery 기반의 Open Source Plugin 입니다.

응답성, 경량, 고속, CSS 애니메이션과 동기화, 선언적 구성 및 해시 추적 기능을 갖춘 완전 사용자 정의 가능한 모달 창 플러그인.

IE8 에서도 사용이 가능합니다.

MIT 라이센스입니다.

단점은 개발자가 소스에 대한 기능 추가를 포기한 상태 입니다., 2017년 이후로 수정이력이 없습니다. ( https://github.com/VodkaBears/Remodal#remodal )

14. rmodal.js ( https://rmodal.js.org/ )

 

rmodal.js

A simple modal dialog with no external dependencies

rmodal.js.org

jQuery 기반이 아닙니다. 종속성이 전혀 없는 순수 Javascript Source 입니다.

심플하고, 고속, 경량의 기능을 가집니다.

IE10 이후 버전을 지원합니다.

Bootstrap과 Animate.css를 지원합니다.

MIT 라이센스입니다.

단점은 2021년 이후로 수정이력이 없습니다. ( https://github.com/zewish/rmodal.js )

15. bPopup.js ( http://dinbror.dk/blog/bPopup/ )

 

bPopup.js – A jQuery popup plugin | dinbror

01.24.15: New release, bPopup version 0.11.0 01.16.14: Sadly my host has had serious server issues why all old comments are gone! bPopup is a learning and exploring jQuery project. It’s a lightweight cross browser jQuery popup plugin. It’s not creating

dinbror.dk

jQuery 기반의 Open Source Plugin 입니다.

단점은 2015년 이후로 수정이력이 없습니다. ( https://github.com/dinbror/bpopup )

16. jQuery BlockUI ( https://malsup.com/jquery/block/ )

 

 

jQuery BlockUI Plugin

Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to t

malsup.com

jQuery 기반의 Open Source Plugin 입니다.

단점은 2014년 이후로 수정이력이 없습니다. ( https://github.com/malsup/blockui/ )

17. jqModal ( https://github.com/briceburg/jqModal/ )

jQuery 기반의 간단한 Open Source Plugin 입니다.

주석을 포함해서 약 375줄의 코드드로 구성되어 있는 간단한 plugin 입니다.

MIT 라이센스입니다.

단점은 2016년 이후로 수정이력이 없습니다. ( https://github.com/briceburg/jqModal/ )

18. Avgrund Modal( https://github.com/hakimel/Avgrund )

jQuery 기반의 Open Source Plugin 입니다.

jQuery 기반의 간단한 Open Source Plugin 입니다.

MIT 라이센스입니다.

단점은 2018년 이후로 수정이력이 없습니다. ( https://github.com/hakimel/Avgrund )

19. jQuery Popdown ( http://wixel.github.io/jquery-popdown/ )

jQuery 기반의 Open Source Plugin 입니다.

jQuery 기반의 간단한 Open Source Plugin 입니다.

MIT 라이센스입니다.

단점은 2015년 이후로 수정이력이 없습니다. ( https://github.com/Wixel/jquery-popdown )

728x90

'JSP&JavaScript&HTML' 카테고리의 다른 글

Progress Bar 샘플  (0) 2023.06.10
Ajax data를 Controller에서 받는 두 가지 방법 : Vo / Map  (0) 2023.06.05
[Source] JDBC Connection Test && JDBC Version 확인  (0) 2022.08.16
[jQuery] 클립보드 복사 & 붙여넣기  (0) 2021.02.15
[JSON] 문자열을 JSON 변환, JSON 을 문자열 변환  (0) 2021.01.26
'JSP&JavaScript&HTML' Related Articles more