• 이윰빌더 시즌 4
  • 테마/스킨상점
이윰

모달 & 라이트박스

모달

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

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

모달 기본

모달 크기

.modal-xs .modal-sm .modal-default .modal-lg .modal-xlg

모달 색상

.bg-light .bg-dark .bg-red .bg-blue .bg-green .bg-yellow .bg-purple .bg-brown .bg-orange .bg-indigo .bg-teal .bg-pink

모달 이벤트

경고창(sweetalert)

플러그인 호출

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

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

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

라이트박스

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

플러그인 호출

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

<!--작업중인 파일 상단에 추가-->
<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>

단일 이미지 라이트박스

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

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

라이트박스 갤러리

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

줌 효과 갤러리

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

비디오 / 지도 / 폼

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

Form

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


Modal

Modal 열기

Modal 대화

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

닫기

썸네일 오버레이

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

비디오 반응형

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

<div class="responsive-video">
    YouTube iframe 동영상소스
</div>
<div class="responsive-video">
    Vimeo iframe 동영상소스
</div>