트위터 부트 스트랩 모달을 전체 화면으로 만드는 방법

160 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

위의 코드에 대해 트위터 부트 스트랩 모달 팝업을 전체 화면으로 만들려면 CSS로 놀아 보았지만 원하는 방식으로 얻을 수 없었습니다. 누구든지 도와주세요.

css  twitter-bootstrap 
— 흐리시 케시 사 다르
소스

답변:

280

Bootstrap 3에서 다음 코드를 사용하여 이것을 달성했습니다. 

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

일반적으로 간격 / 패딩 문제에 대한 질문이있는 경우 요소를 마우스 오른쪽 버튼으로 클릭 (또는 cmd + 클릭)하고 Chrome에서 "요소 검사"또는 Firefox에서 "파이어 버그로 요소 검사"를 선택하십시오. "요소"패널에서 다른 HTML 요소를 선택하고 원하는 패딩 / 간격을 얻을 때까지 오른쪽에서 CSS를 실시간으로 편집하십시오.

라이브 데모입니다

여기에 바이올린 링크가 있습니다

— 크리스 제이
소스
12
또한 추가 거라고 margin: 0에 .modal-dialog.
— harrison4
10
BTW : .modal-content콘텐츠가 맨 아래에 넘쳐서 아래로 스크롤 될 때 중단됩니다. 그것은해야한다min-height: 100%; height: auto;
— Yanick Rochon
3
모바일 앱을 디자인 할 경우 Chris의 CSS를 미디어 쿼리 안에 넣어 더 넓은 화면에서 일반적인 모달 너비를 가질 수 있습니다. @media (max-width : 768px) {...}
— Nicolas Connault
"거의"전체 화면 모달이 필요한 경우 .modal {padding : ... px}를 추가 할 수도 있습니다
— andrii
8
.modal-dialog또한 필요 max-width: 100%;에 대한 부트 스트랩 4
— 아난드 Rockzz
25

선택한 솔루션은 둥근 모서리 스타일을 유지하지 않습니다. 둥근 모서리를 유지하려면 너비와 높이를 약간 줄이고 테두리 반경 0을 제거해야합니다. 또한 세로 스크롤 막대가 표시되지 않습니다 ...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}
— 에스테반
소스
1
모서리가 둥글고 모델의 느낌을 유지하는보다 정답 인 답변은 모달 대신 오버레이 레이어를 나타냅니다.
— Clain Dsilva
모달이 전체 화면을 차지하는 경우 주위에 둥근 모서리가 있으면 끔찍하게 보입니다 (IMHO).
— Dementic
16

부트 스트랩 4의 경우 최대 너비로 미디어 쿼리를 추가해야합니다.

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}
— 모렐
소스
16

풀 스크린 모달을위한 "반응 형"솔루션을 생각해 냈습니다.

특정 중단 점 에서만 활성화 할 수있는 전체 화면 모달 . 이러한 방식 으로 모달은 더 넓은 (데스크톱) 화면에 "일반"을 표시하고 더 작은 (태블릿 또는 모바일) 화면에 전체 화면을 표시 하여 기본 앱의 느낌을줍니다.

Bootstrap 3 및 Bootstrap 4 용으로 구현되었습니다 .

부트 스트랩 v4

다음과 같은 일반 코드가 작동해야합니다.

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

아래에 scss 코드를 포함시켜 .modal요소에 추가해야하는 다음 클래스를 생성합니다 .

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

scss 코드는 다음과 같습니다

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-body {
    overflow-y: auto;
  }

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

Codepen 데모 : https://codepen.io/andreivictor/full/MWYNPBV/

부트 스트랩 v3

이 주제 (@Chris J, @kkarli)에 대한 이전 응답을 기반으로 다음 일반 코드가 작동해야합니다.

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

.modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

반응 형 전체 화면 모달을 사용하려면 .modal요소에 추가해야하는 다음 클래스를 사용하십시오 .

  • .modal-fullscreen-md-down-모달은보다 작은 화면의 전체 화면입니다 1200px.
  • .modal-fullscreen-sm-down-모달은보다 작은 화면의 전체 화면입니다 922px.
  • .modal-fullscreen-xs-down-모달이 화면보다 작은 경우 전체 화면입니다 768px.

다음 코드를 살펴보십시오.

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

데모는 Codepen ( https://codepen.io/andreivictor/full/KXNdoO )에서 사용할 수 있습니다 .

Sass를 프리 프로세서로 사용하는 사용자는 다음 믹스 인을 활용할 수 있습니다.

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}
— andreivictor
소스
11

다음 클래스는 부트 스트랩에서 전체 화면 모달을 만듭니다.

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

모달의 내부 내용이 어떻게 구성되어 있는지 잘 모르겠습니다. CSS와 관련된 전체 높이에 영향을 줄 수 있습니다.

— 마이크 재킹
소스
.fullscreen은 무엇입니까? CSS를 #myModal에 포함했지만 너비는 작동했지만 높이는 작동하지 않았습니다.
— Hrishikesh Sardar
.fullscreen이 문제를 해결하기 위해 만든 클래스이며 Bootstrap에 포함되어 있지 않습니다. JSFiddle 또는 CodePen 에 코드 샘플을 게시 할 수 있습니까 ? 코드를 보지 않으면 도움을 드릴 수 없습니다.
— micjamking
높이를 추가하려면 #myModal이 아닌 model-body에 높이를 추가해야합니다.
— QasimRamzan
9

부트 스트랩 4

수업 추가 :

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

그리고 HTML에서 :

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">
— 블라드
소스
7

@Chris J 의 스 니펫 에는 여백 및 오버플로 관련 문제가있었습니다. @Chris J의 fiddel에 기반한 @YanickRochon 및 @Joana의 제안 된 변경 사항은 다음 jsfiddle 에서 찾을 수 있습니다 .

그것은 나를 위해 일한 CSS 코드입니다.

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
— 카 칼리
소스
2

아래와 같이 DIV 태그를 설정해야합니다.

자세한 내용 찾기> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>
— 벤
소스
-1

솔루션의 변형 : (scss)

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

(css)

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}
— 치매
소스
-1 
.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}
— 알리레자 파스
소스
2
이것이 왜 질문에 대한 답인지 더 명확하게 설명하십시오.
— Jeroen Heier
-1

이것을 사용하십시오 :

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

그래서 :

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>
— hojjat.mi
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.