웹솔루션개발 25년 노하우! 해피CGI의 모든것

Css로만 이루어진 모달 팝업창입니다 크롬 및 최신버전의 ie버전에서는 정상작동을 하지만 하위버전의 ie브라우저라면 정상작동을 하지 않을 수 있습니다. 압축파일내에 index.html 파일과 style.css 파일이 있으며 호출하여 바로 확인하실 수 있습니다.

css 만으로 구현되어 있습니다. 팝업출력시 스케일이 변경되며 펼쳐지는 효과가 있습니다 마찬가지로 팝업을 닫을때도 스케일이 변경되며 사라집니다.

popModal은 jQuery 플러그인을 이용하여 ​툴팁, 제목, 모달, 대화상자, 확인 팝업 모달을 만들수 있습니다 1.jQuery 가 필요 합니다. 2.css 와 popModal.min.js 파일을 호출하세요. 3.버튼을 생성하여 모달 클릭할 준비하세요. 4.버튼을 클릭하면 생성될 모달을 만들어주세요. 위의 방법이 기본적인 모달 생성 방법 입니다. 다양한 옵션이 존재 하네요. 유의사항 popModal 을 이용하여 동적모달을 생성할 수 있습니다. 하지만 로컬 형태에서는 작동하지 않으니 웹에서 테스트 해 보셔야 합니다. 그리고 라이센스는 MIT 라이센스 입니다. ​

모달 팝업을 이용해서 이미지 크기를 조정,회전,자르기,미리보기를 할수 있는 jQuery 플러그인입니다. 웹페이지에서 이미지 파일을 선택해서 모달창을 이용해서 이미지를 회전하거나, 이미지중 일부 부분만 자르는 등의 조절을 할수 있는 jquery 플러그인입니다. 압축을 풀면 나오는 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 이미지를 선택하면 위 그림과 같은 모달창을 이용해서 이미지를 회전시킬수 있으며, 사용할 크기를 마우스로 드래그 해서 지정할 수 있습니다. 이미지를 편집하기에 필요한 옵션들을 위 그림과 같이 지정할수 있네요. 몇가지 옵션을 제공하고 있으며, 샘플을 확인하기 위한 index.html 에 어떤 옵션인지에 대해서 설명을 해주고 있습니다.

Modally 는 디자인 작업이 쉽도록 구성되어 있습니다. 가벼운 jQuery 플러그인으로 중첩 모달을 생성 할 수 있습니다. 중첩모달이란? ( 모달에서 또 다시 모달을 여는 것을 뜻합니다. ) 플러그인 작동을 사용자 정의하기위한 일부 구성 옵션이 제공됩니다. 사용자 정의 너비 및 CSS 스타일을 설정할 수 있습니다.플러그인에는 jQuery를 제외한 다른 외부 라이브러리가 필요하지 않습니다. 라이센스는 MIT 라이센스 입니다.

첨부파일을 다운로드 받아서 압축을 해제한 후 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 모달창이 화면에 보여지면서, 기본형(별다른 효과가 없는), 페이드(fade) 효과를 주면서 뜨도록 하는 타입이 있고, 배경이미지를 보여주고 모달화면이 생기는 효과가 있습니다. 기본형 또는 페이드 효과를 줬을때 화면에 모달이 표시되는 샘플 HTML태그에서 아래와 같은 소스코드로 기본형 또는 애니메이션 효과를 줄수 있네요. Default Modal Fade Animation 배경에 이미지가 포함된 예제도 있는데, Image" target=_blank>https://source.unsplash.com/1600x900/?fitness)"}}'>Image Background 위 처럼 data-nkd..

jquery-modal 은 이름 그대로 jQuery 를 이용하여 여러가지 모달을 구현해 놓았습니다. 1.일반 모달창 2.로그인 모달창 3.콘텐츠에 맞춘 모달창 4.Ajax 모달창 5.닫기 버튼이 없고 오직 브라우저를 닫기 밖에 안되는 모달창 6.다중 모달창 7.페이드 효과가 포함된 모달창 8.닫기 버튼 커스텀 버젼 모달창 기본 모달창 1개를 이용하여 여러가지 타입으로 나눠서 샘플을 잘 구성해 두었네요. 그래서 필요한 상황에 맞는 모달을 가져와서 사용하시면 좋을듯 합니다. 사용법은 생각보다 간단합니다. 첨부된 압축파일 해제 하시면 examples/index.html 파일을 보시면 샘플코드가 들어 있습니다. 기본 모달의 호출조건은 아래의 이미지를 봐 주세요 모달 버튼의 href 와 모달 레이어의 id 값을 ..

다양한 형태의 무료오픈소스 모달창 소스입니다. 텍스트, 버튼, 사이즈가 큰 컨텐츠, 동영상 등 다양한 컨텐츠를 사용할수 있습니다. 해당페이지에서 스크립트 옵션을 확인할 수 있습니다.