programing tip

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

itbloger 2020. 6. 16. 20:38
반응형

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

<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로 놀아 보았지만 원하는 방식으로 얻을 수 없었습니다. 누구든지 도와주세요.

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를 실시간으로 편집하십시오.

라이브 데모입니다

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

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

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

.modal-content {
  height: 99%;
}

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

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

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

.modal-content {
  height: 99%;
}

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

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

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

이 주제에 대한 이전 답변 (@Chris J, @kkarli)을 바탕으로 전체 화면 모달에 대한 "응답"솔루션을 찾았습니다.

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

.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;
  } 
}

/* 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;
  }
}

/* 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;
  }
}

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

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

@mixin modal-fullscreen() {
  padding: 0 !important;

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

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

}

@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;
}

부트 스트랩 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">

아래와 같이 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>

솔루션의 변형 : (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%;
}

.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;
}

이것을 사용하십시오 :

.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>

참고 URL : https://stackoverflow.com/questions/18432394/how-to-make-twitter-bootstrap-modal-full-screen

반응형

'programing tip' 카테고리의 다른 글

안드로이드 패키지의 리소스 ID에서 Drawable 객체를 어떻게 얻습니까?  (0) 2020.06.17
커밋해서는 안되는 Gradle 구성 (예 : 자격 증명)을 어디에 두어야합니까?  (0) 2020.06.17
JavaScript의 querySelector 및 querySelectorAll vs getElementsByClassName 및 getElementById  (0) 2020.06.16
jquery : Enter 키를 누를 때 클릭 이벤트를 트리거하는 방법  (0) 2020.06.16
js를 사용하여 소프트웨어 버전 번호를 비교하는 방법은 무엇입니까?  (0) 2020.06.16

'programing tip'의 다른글

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

관련글

댓글

티스토리툴바