Twitter 부트스트랩 모달 전체 화면을 만드는 방법

source

Twitter 부트스트랩 모달 전체 화면을 만드는 방법

manycodes 2023. 8. 14. 22:59

Twitter 부트스트랩 모달 전체 화면을 만드는 방법

<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를 가지고 놀려고 했지만 제가 원하는 방식으로 얻을 수 없었습니다.누구든 저를 도와주실 수 있나요?

저는 부트스트랩 3에서 다음 코드로 이를 달성했습니다.

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

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

일반적으로 간격/패딩 문제와 관련하여 질문이 있을 경우 요소를 마우스 오른쪽 버튼으로 클릭(또는 mac에서 cmd+클릭)하고 Chrome에서 "inspect element"를 선택하거나 Firefox에서 "inspect element with firebug"를 선택합니다.원하는 패딩/간격을 얻을 때까지 "elements" 패널에서 다른 HTML 요소를 선택하고 오른쪽에 있는 CSS를 실시간으로 편집해 보십시오.

여기 라이브 데모가 있습니다.

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

저는 전체 화면 모델에 대한 "반응성" 솔루션을 고안했습니다.

특정 중단점에서만 활성화할 수 있는 전체 화면 Modal.이러한 방식으로 모달은 더 넓은(데스크톱) 화면에 "정상"으로 표시되고 더 작은(태블릿 또는 모바일) 화면에 전체 화면이 표시되어 네이티브 앱과 같은 느낌을 줍니다.

부트스트랩 3 및 부트스트랩 4용으로 구현되었습니다.기본적으로 부트스트랩 5에 포함됩니다.

부트스트랩 v5

Bootstrap 5에는 기본적으로 전체 화면 모드가 포함되어 있습니다. https://getbootstrap.com/docs/5.0/components/modal/ #fullscreen-modules

부트스트랩 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 |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen    |  100%   | default | default | default | default | 
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-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();
    }
  }
}

코드펜에 대한 데모: 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;
  }

}

선택한 솔루션은 둥근 모서리 스타일을 유지하지 않습니다.둥근 모서리를 보존하려면 너비와 높이를 조금 줄이고 테두리 반지름 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%;
}

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

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

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

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

@Chris J의 스니펫은 마진과 오버플로와 관련된 몇 가지 문제가 있었습니다.@Chris J의 피델을 기반으로 @YanickRoschon 및 @Joana에 의해 제안된 변경 사항은 다음과 같은 jfiddle에서 찾을 수 있습니다.

그게 제게 효과가 있었던 CSS 코드입니다.

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

bootstap 4.5의 경우: 나는 방금 이 코드를 bootstap 5.scss에서 mysass로 복사했는데 놀라운 일입니다.

@media (max-width: 1399.98px) 
  .modal-fullscreen-xxl-down 
    width: 100vw
    max-width: none
    height: 100%
    margin: 0
  
  .modal-fullscreen-xxl-down .modal-content 
    height: 100%
    border: 0
    border-radius: 0
  
  .modal-fullscreen-xxl-down .modal-header 
    border-radius: 0
  
  .modal-fullscreen-xxl-down .modal-body 
    overflow-y: auto
  
  .modal-fullscreen-xxl-down .modal-footer 
    border-radius: 0

HTML의 경우:

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-xxl-down">
  ...
</div>

오른쪽 디브의 여백, 너비, 높이를 조절하는 것이 전부입니다.

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

.modal {
        padding: 0 !important;
    }
        .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;
        }

제 경우에는 정말 완벽합니다. 감사합니다.

**모달을 일반보다 크게 하려면 .css 코드를 작성할 필요가 없습니다. 부트스트랩 모달 클래스를 직접 작성할 수 있습니다 **

<div class="modal fade" id="mappingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">

modal-dialog modal-xland만 완료되었습니다.

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

(계속)

.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

'source' 카테고리의 다른 글

mysql 8.0은 이 SQL 스크립트를 실행할 수 있지만 mariaDB 5.5는 실행할 수 없고 오류: 1064(42000) (0)	2023.08.14
SQL의 필드에 chr(30)이 있는 문자열을 삽입하는 방법 (0)	2023.08.14
사용자가 모바일 Safari에서 탐색했는지 확인 (0)	2023.08.14
변수에 대한 스크립트를 사용하여 프로세스 ID를 서비스 이름으로 가져오는 방법 (0)	2023.08.14
앵커 태그 내에서 제목 속성의 스타일을 변경하는 방법은 무엇입니까? (0)	2023.08.14

현재글Twitter 부트스트랩 모달 전체 화면을 만드는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

reactjs, JSON, ASP.NET, MySQL, mariadb, Excel, Oracle, php, C, spring-boot, WPF, Wordpress, Python, MongoDB, Git, Java, angular, jQuery, JavaScript, angularJS,

Today :
Yesterday :

manycodes

Twitter 부트스트랩 모달 전체 화면을 만드는 방법

Twitter 부트스트랩 모달 전체 화면을 만드는 방법

부트스트랩 v5

부트스트랩 v4

부트스트랩 v3

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Twitter 부트스트랩 모달 전체 화면을 만드는 방법

Twitter 부트스트랩 모달 전체 화면을 만드는 방법

부트스트랩 v5

부트스트랩 v4

부트스트랩 v3

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바