Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Giải pháp hộp đèn chỉ CSS

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 13:43:33 30 4
mua khóa gpt4 Nike

Tôi đang phát triển giải pháp hộp đèn CSS thuần túy cho các phần tử của mình. Tôi đã tìm kiếm nó nhưng cho đến nay chỉ tìm thấy giải pháp một phần.

Tôi đang tìm kiếm các tính năng này:

  • Hiển thị nội dung có chiều rộng và chiều cao bất kỳ (không có chiều cao/chiều rộng cố định)
  • Căn giữa theo chiều dọc và căn giữa theo chiều ngang
  • Thanh cuộn được hiển thị nếu chiều rộng và/hoặc chiều cao của nội dung vượt quá giới hạn hộp đèn do kích thước khung nhìn.

Cho đến nay tôi có điều này:

.lb-lớp phủ {
    text-align: center;
    nền: #c0c0c0;
    nền: rgba(0,0,0,0,5);
    đường viền: #a0a0a0 rắn 1px;
    position: fixed;
    left: 0;
    trên cùng: 0; bên phải: 0; dưới cùng: 0;
    chỉ số z: 10000;
}

.lb-overlay:sau {
    nội dung: '';
    hiển thị: khối nội tuyến;
    chiều cao: 100%;
    chiều rộng: 0;
    căn dọc: giữa;
    màu nền: #f00;
}

.lb-quấn {
    hiển thị: khối nội tuyến;
    căn dọc: giữa;
    position: relative;
    nền: #ffffff;
    chiều cao tối đa: 90%;
    chiều rộng tối đa: 90%;
    chỉ số z: 10001;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    bóng hộp: 0 0 8px rgba(0,0,0,0,25);
}

.lb-nội dung {
    position: relative;
    tràn: tự động;
    lề: 2em;
    -webkit-box-sizing: hộp viền;
    -moz-box-sizing: hộp viền;
    kích thước hộp: hộp viền;
}

.lb-đóng {
    vị trí: tuyệt đối; bên phải: 0; trên cùng: 0;
    màu nền: #d00000;
    margin: 0;
    color: #fff;
    phần đệm: 4px;
    chiều cao dòng: 1em;
    chiều rộng: 2em;
    chiều cao: 2em;
    đường viền: 0;
    phác thảo: 0;
    cursor: pointer;
    -webkit-box-sizing: hộp viền;
    -moz-box-sizing: hộp viền;
    kích thước hộp: hộp viền;
}
.lb-close:hover { màu nền: #f00000 }

http://jsfiddle.net/TomasReichmann/F4D5u/1/

câu hỏi:

  • Không có thanh cuộn dọc xuất hiện
  • Thanh cuộn ngang chỉ hoạt động trong chrome

Lý tưởng nhất là tôi đang tìm kiếm khả năng tương thích với các trình duyệt hiện đại và IE8+, nhưng tôi thấy ổn với IE9+

Bạn có thể giúp được không?

câu trả lời hay nhất

  1. Loại bỏ các mô hình kích thước không cần thiết
  2. Đặt kích thước đầy đủ của lớp phủ thành chiều rộng: 100%; chiều cao: 100%;
  3. Căn giữa các dòng trong lớp phủ theo chiều dọc và chiều ngang bằng cách sử dụng lề: tự động và vị trí: trên cùng: 0; dưới cùng: 0;
  4. Sử dụng chiều rộng và chiều cao thay vì chiều rộng tối đa và chiều cao tối đa
  5. Sử dụng phần đệm trên bọc để kiểm soát đường viền xung quanh nội dung
  6. Sử dụng tràn:auto;width:100%;height:100%;trên nội dung

总结:http://jsfiddle.net/F4D5u/8/

Mã phong cách hoàn chỉnh:

.lb-lớp phủ {
    nền: #c0c0c0;
    nền: rgba(0,0,0,0,5);
    position: fixed;
    trái: 0; trên cùng: 0; bên phải: 0; dưới cùng: 0;
    chỉ số z: 10000;
    margin: 0;
    chiều rộng: 100%; chiều cao: 100%;
}

.lb-quấn {
    lề: tự động;
    vị trí: tuyệt đối; trên cùng: 0; bên trái: 0; dưới cùng: 0;
    nền: #ffffff;
    chiều rộng: 70%; chiều cao: 70%;
    phần đệm: 2em;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    bóng hộp: 0 0 8px rgba(0,0,0,0,25);
}

.lb-nội dung {
    tràn: tự động;
    chiều rộng: 100%; chiều cao: 100%;
}

.lb-đóng {
    vị trí: tuyệt đối; bên phải: 0px; trên cùng: 0px;
    màu nền: #d00000;
    margin: 0;
    color: #fff;
    phần đệm: 4px;
    chiều cao dòng: 1em;
    chiều rộng: 2em;
    chiều cao: 2em;
    đường viền: 0;
    phác thảo: 0;
    cursor: pointer;
}
.lb-close:hover { màu nền: #f00000 }

Về giải pháp hộp đèn chỉ dành cho CSS, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/22630831/

30 4 0
Bài viết khuyến nghị: html - Làm cách nào để căn giữa cảnh báo này theo chiều ngang?
Bài viết khuyến nghị: tham chiếu không xác định đến hàm trong Makefile.win
Bài viết khuyến nghị: Phím tắt tệp trong Java
Bài viết khuyến nghị: c# - Bitmap "pin" Bitmap.LockBits được lưu trong bộ nhớ?
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress