[이윰] modal 창 크기 변경하기

페이지 정보

루루아빠 3,354 2015.07.30 17:45

평점

  • 평점 : 0점 (0명 참여)

본문

갤러리 뷰에서 모달창과 게시판 문서 검색의 모달창의 크기를 조건에 맞게 반영한다.
그누보드5/eyoom/theme/설치된 테마/css/custom.css를 열고 아래 소스를 삽입한다.

/* modal창 크기 변경하기 */
.modal {
    position: fixed;
    top: 2%;
    right: 2%;
    left: 2%;
    bottom: 2%;
    width: auto;
    height: auto;
    margin: 0;
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
    .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0px auto;
    }
    .modal-sm {
        width: 400px;
        height: 230px;
    }
}
/* Landscape tablets and medium desktops */
@media (min-width: 1002px) and (max-width: 1199px) {
    .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0px auto;
    }
    .modal-sm {
        width: 400px;
        height: 230px;
    }
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 1001px) {
    .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0px auto;
    }
    .modal-sm {
        width: 400px;
        height: 230px;
    }
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0px auto;
    }
    .modal-sm {
        width: 300px;
        height: 230px;
    }
}
.modal-content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
.modal-body {
    height: auto;
/*     padding: 5px 15px 5px 15px; */
}
.modal-title {
    margin-top: 0px
}
.modal-header .close {
  margin-top: 3px;
}
.modal-footer {
    text-align: left;
    padding: 11px;
}

게시판내 문서 검색시 사용하는 모달창 클래스 modal-sm 은 가로, 세로 크기를 고정했다.


 
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,294,728
레벨 97
경험치 1,398,299

Progress Bar 6%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 242213 페이지
제목 글쓴이 날짜 조회 추천
이윰  댓글+1🏆 style.css를 유지하면서 venobox 플러그인 사용하기 루루아빠 2015.07.30 3,466 0
이윰  🏆 SNS 아이콘 툴팁 추가와 효과 바꾸기 루루아빠 2015.10.01 3,465 0
이윰  🏆 이윰빌더 1.1.5 패치 루루아빠 2015.06.22 3,450 0
이윰  🏆 짧은 글 주소에 댓글에 표시되지 않는 버그 패치 루루아빠 2015.06.08 3,431 0
이윰  🏆 Eyoom Builder 1.3.14 패치 루루아빠 2017.12.17 3,422 0
이윰  댓글+1🏆 이윰 메뉴 설정에서 출력 순서로 인한 오류 발생시 루루아빠 2015.04.09 3,418 0
이윰  🏆 이윰빌더 1.1.6 패치 루루아빠 2015.06.23 3,408 0
이윰  🏆 🚩 modal 창 크기 변경하기 루루아빠 2015.07.30 3,355 0
이윰  🏆 이윰빌더 1.1.4 패치 루루아빠 2015.06.08 3,328 0
이윰  댓글+2🏆 게시판 카테고리 탭 형식으로 만들기 루루아빠 2015.04.21 3,306 0
이윰  🏆 로그인을 메인으로 - 회원제 사이트 - 폐쇄형 사이트용 루루아빠 2015.07.08 3,297 0
이윰  댓글+1🏆 디바이스에 따른 내용 보이기 숨기기 루루아빠 2015.03.20 3,289 0
이윰  댓글+2🏆 쪽지 보낼때 캡챠코드 사용하지 않기 - 오류 루루아빠 2015.09.24 3,288 0
이윰  🏆 스크린 사이즈에 따른 미디어 쿼리(container 크기 변화) 루루아빠 2015.06.25 3,274 0
이윰  🏆 모달(modal) 슬라이드 다운 슬라이드 업 효과 없애기 루루아빠 2016.05.13 3,250 0
이윰  🏆 Eyoom Builder 1.1.14 패치 루루아빠 2015.10.30 3,230 0
이윰  🏆 아웃로그인 레이아웃 변경하기 루루아빠 2015.06.19 3,216 1
이윰  댓글+1🏆 스타일박스 패치, ios 관련 패치 루루아빠 2015.07.09 3,206 0
이윰  🏆 배너 광고 설정법 루루아빠 2015.05.20 3,197 0
이윰  🏆 사이드 레이아웃의 프로필 사진 옆에 쪽지 badge 만들기 루루아빠 2015.06.18 3,191 0