Làm thế nào để tạo Twitter bootstrap modal toàn màn hình

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

Làm cách nào để tạo một cửa sổ bật lên chế độ twitter bootstrap toàn màn hình cho đoạn mã trên, tôi đã thử chơi xung quanh với css nhưng không thể có được nó theo cách tôi muốn. Bất cứ ai có thể xin vui lòng giúp tôi với nó.

Tôi đã đạt được điều này trong Bootstrap 3 với đoạn mã sau:

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

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

Nói chung, khi bạn có câu hỏi về các vấn đề về khoảng cách / phần đệm, hãy thử phải + nhấp (hoặc cmd + nhấp vào mac) phần tử và chọn "kiểm tra phần tử" trên Chrome hoặc "kiểm tra phần tử với fireorms" trên Firefox. Hãy thử chọn các thành phần HTML khác nhau trong bảng "phần tử" và chỉnh sửa CSS ở bên phải trong thời gian thực cho đến khi bạn nhận được phần đệm / khoảng cách bạn muốn.

Đây là một bản demo trực tiếp

Đây là một liên kết đến fiddle

Giải pháp được chọn không bảo tồn kiểu góc tròn. Để duy trì các góc tròn, bạn nên giảm chiều rộng và chiều cao một chút và xóa bán kính đường viền 0. Ngoài ra, nó không hiển thị thanh cuộn dọc ...

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

.modal-content {
  height: 99%;
}

Đối với bootstrap 4 tôi phải thêm truy vấn phương tiện với độ rộng tối đa: không có

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

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

.modal-content {
  height: 99%;
}

Tôi đã đưa ra một giải pháp "đáp ứng" cho các chế độ toàn màn hình:

Chế độ toàn màn hình chỉ có thể được bật trên một số điểm dừng nhất định . Theo cách này , phương thức sẽ hiển thị "bình thường" trên màn hình rộng hơn (máy tính để bàn) và toàn màn hình trên màn hình nhỏ hơn (máy tính bảng hoặc thiết bị di động) , mang lại cảm giác như một ứng dụng gốc.

Được triển khai cho Bootstrap 3 và Bootstrap 4 .

Bootstrap v4

Mã chung sau đây sẽ hoạt động:

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

Bằng cách bao gồm mã scss bên dưới, nó tạo ra các lớp sau cần được thêm vào .modalphần tử:

+---------------+---------+---------+---------+---------+---------+
|               |   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%   |
+---------------+---------+---------+---------+---------+---------+

Mã scss là:

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

Bản trình diễn trên Codepen: https://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

Dựa trên các phản hồi trước đây cho chủ đề này (@Chris J, @kkarli), mã chung sau sẽ hoạt động:

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

Nếu bạn muốn sử dụng các chế độ toàn màn hình đáp ứng, hãy sử dụng các lớp sau cần được thêm vào .modalphần tử:

• .modal-fullscreen-md-down- phương thức là toàn màn hình cho màn hình nhỏ hơn 1200px.
• .modal-fullscreen-sm-down- phương thức là toàn màn hình cho màn hình nhỏ hơn 922px.
• .modal-fullscreen-xs-down- phương thức là toàn màn hình cho màn hình nhỏ hơn 768px.

Hãy xem đoạn mã sau:

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

Bản demo có sẵn trên Codepen: https://codepen.io/andreivictor/full/KXNdoO .

Những người sử dụng Sass làm tiền xử lý có thể tận dụng mixin sau:

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

}

Lớp sau sẽ tạo một chế độ toàn màn hình trong Bootstrap:

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

Tôi không chắc nội dung bên trong phương thức của bạn được cấu trúc như thế nào, điều này có thể có ảnh hưởng đến chiều cao tổng thể tùy thuộc vào CSS được liên kết với nó.

cho bootstrap 4

thêm lớp:

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

và trong HTML:

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">

Các đoạn từ @ Chris J đã có một số vấn đề với lề và tràn. Những thay đổi được đề xuất bởi @YanickRhol và @Joana, dựa trên fiddel từ @Chris J có thể được tìm thấy trong jsfiddle sau đây .

Đó là mã CSS hoạt động với tôi:

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

Bạn cần đặt các thẻ DIV của bạn như dưới đây.

Tìm thêm chi tiết> 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>

Biến thể của tôi về giải pháp: (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;
}

Dùng cái này:

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

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

và vì thế:

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