이윰

본문 바로가기

모달 & 라이트박스

본 페이지의 테마코드 활용법은 2022년 01월 이후 선보인 이윰빌더 시즌4 부트스트랩5 기반의 테마코드 활용법입니다.

이전 이윰빌더 시즌4 부트스트랩3 기반의 테마코드 활용법은 아래 링크를 참조하여 주시기 바랍니다.
https://eyoom.net/page/eb4_code

Modal

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

아래의 예제들은 버튼 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.
예제의 샘플을 작동해 보았다면, 새로고침 후 소스코드를 복사하여 사용하세요. (작동 후 불필요한 소스가 잔존하기 때문)

모달 기본

모달 스크롤 & 수직 중앙

.modal-dialog-scrollable

.modal-dialog-centered

.modal-dialog-centered .modal-dialog-scrollable

모달 크기

.modal-xl

.modal-lg

.modal-sm

모달 색상

.modal-gray

.modal-dark

.modal-crimson

.modal-indigo

.modal-teal

.modal-purple

그외 다른 색상으로 적용이 가능합니다. .modal-red, .modal-blue, .modal-green ... 등

Sweetalert2

플러그인 호출

작업중인 파일 상단과 하단에 아래소스를 추가합니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="<?php echo EYOOM_THEME_URL; ?>/plugins/sweetalert2/sweetalert2.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/sweetalert2/sweetalert2.min.js"></script>
Markup

그외 예제는 아래 링크를 참조하시기 바랍니다.

https://sweetalert2.github.io/

Lightbox

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

플러그인 호출

작업중인 파일 상단과 하단에 아래소스를 추가합니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="<?php echo EYOOM_THEME_URL; ?>/plugins/magnific-popup/magnific-popup.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/magnific-popup/magnific-popup.min.js"></script>
HTML

단일 이미지 라이트박스

세가지 유형의 크기 조절 설정

  1. 수직과 수평을 맞춤
  2. 수평만 맞춤
  3. 줌 애니메이션 효과, 화면 우측 상단으로 닫기 아이콘 위치 설정

라이트박스 갤러리

각 갤러리 항목에있는 HTML 콘텐츠를 넣어 콘텐츠 형식을 혼합 할 수 있습니다. 이 예에서 이미지의 로딩은 이동 방향에 따라 다음 이미지를 사용할 수 있습니다.

줌 효과 갤러리

아래의 예제들은 버튼 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.

비디오 / 지도 / 폼

YouTube 비디오
Vimeo 비디오
Google 지도
폼 열기

Form

라이트 박스는 자동으로 첫 번째 입력에 초점을 맞출 수있는 옵션이 있습니다.


Modal

Modal 열기

Modal 대화

이 예제는 사용자의 선택이나 액션(클릭)으로 창을 닫게 만들수 있습니다.

닫기

Tumbnail Overlay

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

공연

Responsive Video

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

<div class="responsive-video">
    YouTube iframe 동영상소스
</div>
Markup
<div class="responsive-video">
    Vimeo iframe 동영상소스
</div>
Markup
사이트 내 전체검색
0%