Misalkan CSS untuk dialog Please Wait saya adalah

.loadingProgressDialog {
    width: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    top: 60%;
    left: 40%;
    position: absolute;
    z-index: 9999999999;
    background-color: white;    
}

Ketika saya menampilkannya di bagian bawah halaman di laptop, DIV tidak terlihat di bagian atas. Pemosisian tergantung pada seberapa jauh saya menggulir, bukan pada 60% tetap yang diambil dari ukuran bagian yang terlihat saat ini. Apakah ada cara mudah untuk mendapatkannya berdasarkan ukuran layar saat ini tanpa menggunakan peretasan JS?

0
gene b. 22 Oktober 2019, 03:46

1 menjawab

Jawaban Terbaik

Jika .loadingProgressDialog Anda berbasis ukuran layar, Anda dapat menggunakan position: fixed; bersama dengan unit viewport vh dan vw

.loadingProgressDialog {
    width: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    top: 60vh;
    left: 40vw;
    position: fixed;
    z-index: 9999999999;
    background-color: white;    
}
1
Nidhin Joseph 22 Oktober 2019, 00:49