Làm thế nào để làm cho nền tảng 5 Reveal Popup đáp ứng?

Question

Tôi đang sử dụng phiên bản mới nhất của Foundation Foundation 5, tôi muốn sử dụng Reveal Popup trong dự án của mình, tôi đã cố triển khai bằng cách sử dụng mã sau và các tệp .js.

Làm việc tốt trong các màn hình lớn như Laptop và máy tính bảng, nhưng khi tôi cố gắng mở trang của mình trong các thiết bị nhỏ như thiết bị di động thì nó không hiển thị đúng cách Tôi phải di chuyển sang phải và sang trái trong màn hình di động của mình để xem toàn bộ cửa sổ bật lên.

• Bao gồm CSS

  <link href="../../Content/foundation/css/foundation.css" rel="stylesheet" type="text/css" /> <link href="../../Content/foundation/css/normalize.css" rel="stylesheet" type="text/css" />

• HTML phần

Hãy giúp tôi hoặc đề nghị tôi nếu tôi bỏ sót bất cứ điều gì trong mã trên.

• hình ảnh 2

Answer 1

Sử dụng lớp lưới trong xây dựng của nền tảng large-10 small-10 medium-10

<div id="myModal" class="reveal-modal large-10 small-10 medium-10 columns" data-reveal> 
    <h2>Popup title.</h2> 
    <p class="lead">Your couch. It is mine.</p> 
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

Và bạn phải gỡ bỏ dòng này của css:

.reveal-modal { 
    width: 100vw; //remove this line from your css 
} 

Answer 2

Trong _reveal.scss chỉnh sửa phần @media #{$small-only}.

thêm dòng width: 90vw;

Nó sẽ giống như thế này khi bạn đang thực hiện:

@media #{$small-only} { 
    min-height:100vh; 
    width: 90vw; 
} 

Bạn cũng có thể loại bỏ các dòng min-height:100vh; nếu bạn không muốn các phương thức để theo chiều dọc lấp đầy màn hình trên điện thoại di động thiết bị.

Giải pháp này không yêu cầu sử dụng cột lưới.

Answer 3

Các câu trả lời khác sẽ hoạt động, sắp xếp. Điều này thực sự là do nền tảng không còn áp dụng kích thước hộp: hộp biên giới cho tất cả các yếu tố trên bảng. Nó được thêm vào padding cho toàn bộ tiết lộ 100% chiều rộng, mà đẩy nó bên ngoài cơ thể.

.reveal-modal { 
    box-sizing:border-box; 
    min-height:0 /* If you want to remove the full viewport height effect */ 
}