Rumah > hujung hadapan web > tutorial js > Kod mudah untuk melaksanakan lapisan topeng menggunakan jQuery CSS yang serasi dengan pelayar utama_jquery

Kod mudah untuk melaksanakan lapisan topeng menggunakan jQuery CSS yang serasi dengan pelayar utama_jquery

WBOY
Lepaskan: 2016-05-16 16:34:18
asal
1214 orang telah melayarinya

Klik "Daftar" pada halaman, dan lapisan topeng hitam dengan kelegapan akan muncul di atas lapisan topeng pada masa ini, elemen lain pada halaman kecuali kotak pendaftaran tidak boleh diklik; " pada kotak pendaftaran Hanya berjalan-jalan" dan topeng itu hilang.

Alamat pratonton:

http://jsfiddle.net/p2x3c7df/embedded/result/

Isi Penting:

1. Kotak pendaftaran sentiasa dipusatkan secara mendatar dan menegak, termasuk apabila menatal halaman ke atas dan ke bawah dengan roda tetikus, mengezum halaman dan mengubah saiz tetingkap penyemak imbas

Terutamanya dikawal oleh CSS, lebar dan tinggi kotak pendaftaran telah ditentukan (620*420px position:fixed pertama untuk menjadikannya benar-benar diposisikan berbanding tetingkap pelayar; %; kiri:50%; jidar:-210px 0 0 -310px;

2. Apabila mengezum halaman dan mengubah saiz tetingkap penyemak imbas, lapisan topeng mesti sentiasa menutupi keseluruhan dokumen dan mengisi keseluruhan tetingkap yang kelihatan serta bahagian yang perlu ditatal untuk menyemak imbas pelayar kernel yang berbeza seperti peranti Chrome dan IE;

Dua sifat penting: js's window.screen.availHeight dan jQuery's $(document.body).outerHeight(true). window.screen.availHeight merujuk kepada ketinggian kawasan kerja skrin yang tersedia dan $(document.body).outerHeight(true) merujuk kepada jumlah lebar badan dokumen tetingkap semasa penyemak imbas, termasuk margin padding sempadan. window.screen.availHeight digunakan terutamanya untuk IE (11) untuk memastikan bahawa lapisan topeng masih boleh mengisi tetingkap penyemak imbas selepas menskala halaman.

3 Apabila lapisan topeng muncul, halaman masih boleh ditatal ke atas dan ke bawah, tetapi elemen lain pada halaman kecuali kotak log masuk tidak boleh dikendalikan

Kod:

HTML (perlu menguji dokumen yang cukup tinggi):

Salin kod Kod adalah seperti berikut:


   
   

   
   
   
       

           
                注册
           

       

        Bunuh Diri.
        Sementara itu Monte Cristo juga telah kembali ke bandar bersama Emmanuel dan Maximilian. Kepulangan mereka meriah. Emmanuel tidak menyembunyikan kegembiraannya pada penamatan hubungan yang damai, dan lantang dalam ekspresi kegembiraannya. Morrel, di sudut gerabak, membenarkan gayety abang iparnya untuk mengeluarkan dirinya dalam kata-kata, manakala dia merasakan kegembiraan dalaman yang sama, yang, bagaimanapun, mengkhianati dirinya hanya di wajahnya. Di Barriere du Trone mereka bertemu Bertuccio, yang menunggu di sana, tidak bergerak sebagai pengawal di posnya. Monte Cristo meletakkan kepalanya keluar dari tingkap, bertukar beberapa perkataan dengannya dalam nada rendah, dan pelayan itu hilang. "Count," kata Emmanuel, ketika mereka berada di penghujung Place Royale, "letakkan saya di depan pintu saya, supaya isteri saya tidak mempunyai kebimbangan yang tidak perlu mengenai saya atau anda."
        "Sekiranya tidak masuk akal untuk mempamerkan kemenangan kami, saya akan menjemput penghitungan ke rumah kami; selain itu, dia pasti mempunyai hati yang gementar untuk menghiburkan. Jadi kami akan meninggalkan rakan kami, dan biarkan dia cepat pulang. "
        "Berhenti sebentar," kata Monte Cristo; "Jangan biarkan saya kehilangan kedua-dua sahabat saya. Kembali, Emmanuel, kepada isteri menawan anda, dan menyampaikan pujian terbaik saya kepadanya; dan adakah anda, Morrel, menemani saya ke Champs Elysees."
        "Rela hati," kata Maximilian; "terutamanya kerana saya mempunyai perniagaan pada suku itu."
        "Kita tunggu sarapan untuk awak?" tanya Emmanuel.
        "Tidak," jawab pemuda itu. Pintu ditutup, dan gerabak diteruskan. "Lihat nasib baik yang saya bawa kepada awak!" Kata Morrel, apabila dia bersendirian dengan kiraan. "Adakah anda tidak fikir begitu?"
        "Ya," kata Monte Cristo; "Oleh sebab itu saya ingin menjaga awak dekat saya."
        "Ia adalah ajaib!" sambung Morrel, menjawab fikirannya sendiri.
        "Apa?" kata Monte Cristo.
        "Apa yang baru berlaku."
        "Ya," kata Count, "anda betul -- ia adalah ajaib."
        "Untuk Albert berani," sambung Morrel.
        "Sangat berani," kata Monte Cristo; "Saya telah melihat dia tidur dengan pedang tergantung di atas kepalanya."

        "Dia akan meninggalkan rumahnya," kata pelayan itu.
        "Dan anaknya?"
        "Florentin, valetnya, fikir dia akan melakukan perkara yang sama."
        "Mari ke sini." Monte Cristo membawa Bertuccio ke dalam bilik kerjanya, menulis surat yang telah kita lihat, dan memberikannya kepada pelayan. "Pergi," katanya cepat. "Tapi dulu, biar Haidee maklumkan yang saya dah balik."
        "Saya di sini," kata gadis muda itu, yang apabila mendengar bunyi gerabak telah berlari menuruni tangga dan wajahnya berseri-seri kegembiraan melihat kiraan itu kembali dengan selamat. Bertuccio pergi. Setiap pengangkutan anak perempuan mencari bapa, semua kegembiraan perempuan simpanan melihat kekasih yang dipuja, dirasai oleh Haidee semasa detik-detik pertama pertemuan ini, yang sangat dia jangkakan. Tidak dinafikan, walaupun kurang jelas, kegembiraan Monte Cristo tidak kurang hebatnya. Kegembiraan hati yang telah lama menderita adalah seperti embun di atas tanah setelah kemarau yang panjang; kedua-dua hati dan tanah menyerap lembapan berfaedah yang jatuh ke atas mereka, dan tiada apa yang kelihatan secara zahir.
        Monte Cristo mula berfikir, apa yang dia tidak berani percaya untuk masa yang lama, bahawa terdapat dua Mercedes di dunia, dan dia mungkin masih gembira. Matanya, gembira dengan kegembiraan, membaca dengan penuh minat pandangan Haidee yang sebak, apabila tiba-tiba pintu terbuka. Kiraan itu mengerutkan dahinya. "M. de Morcerf!" kata Baptistin, seolah-olah nama itu sudah memadai untuk alasannya. Malah, wajah kiraan itu menjadi cerah.
        "Yang mana," tanyanya, "viscount atau kiraan?"
        "Pengiraan."
        "Oh," seru Haidee, "belum berakhir?"
        "Saya tidak tahu jika ia telah selesai, anak kesayangan saya," kata Monte Cristo, mengambil tangan gadis muda itu; "tetapi saya tahu awak tidak perlu takut lagi."
        "Tetapi ia adalah orang yang celaka" --
        "Lelaki itu tidak boleh mencederakan saya, Haidee," kata Monte Cristo; "Ia hanya anaknya sahaja yang ada sebab untuk takut."
        "Dan apa yang telah saya derita," kata gadis muda itu, "anda tidak akan tahu, tuanku." Monte Cristo tersenyum. "Demi kubur ayah saya," katanya sambil menghulurkan tangannya ke atas kepala gadis muda itu, "Saya bersumpah kepada awak, Haidee, bahawa jika apa-apa musibah berlaku, ia tidak akan berlaku kepada saya."
        Pintu terbuka luas, seorang jurulatih hackney sedang berdiri di tengah halaman -- pemandangan yang pelik sebelum sebuah rumah agam yang begitu mulia; kiraan itu memandangnya dengan ketakutan, tetapi tanpa berani bertanya maksudnya, dia meluru ke arah apartmennya. Dua orang sedang menuruni tangga; dia hanya mempunyai masa untuk merayap ke dalam ceruk untuk mengelakkan mereka. Mercedes bersandar pada lengan anaknya dan keluar dari rumah. Mereka melewati dekat dengan makhluk yang tidak berpuas hati, yang, bersembunyi di balik tirai damask, hampir merasakan pakaian Mercedes melewatinya, dan nafas hangat anaknya, mengucapkan kata-kata ini, -- "Berani, ibu! Mari, ini bukan lagi rumah kita! " Kata-kata mati, langkah hilang di kejauhan. Jeneral itu menarik dirinya, berpaut pada tirai; dia mengeluarkan esakan yang paling mengerikan yang pernah terlepas dari pangkuan seorang bapa yang ditinggalkan pada masa yang sama oleh isteri dan anaknya. Dia tidak lama kemudian mendengar bunyi derap langkah besi jurulatih hackney, kemudian suara jurulatih, dan kemudian berguling kenderaan berat menggegarkan tingkap. Dia berlari ke bilik tidurnya untuk melihat sekali lagi semua yang dia sayangi di dunia; tetapi jurulatih hackney terus memandu dan ketua Mercedes mahupun anaknya tidak muncul di tingkap untuk melihat terakhir rumah atau bapa dan suami yang ditinggalkan. Dan pada ketika itu apabila roda koc itu melintasi pintu masuk, satu laporan kedengaran, dan asap tebal keluar melalui salah satu kaca tingkap, yang pecah akibat letupan.
        Pintu terbuka luas, seorang jurulatih hackney sedang berdiri di tengah halaman -- pemandangan yang pelik sebelum sebuah rumah agam yang begitu mulia; kiraan itu memandangnya dengan ketakutan, tetapi tanpa berani bertanya maksudnya, dia meluru ke arah apartmennya. Dua orang sedang menuruni tangga; dia hanya mempunyai masa untuk merayap ke dalam ceruk untuk mengelakkan mereka. Mercedes bersandar pada lengan anaknya dan keluar dari rumah. Mereka melewati dekat dengan makhluk yang tidak berpuas hati, yang, bersembunyi di balik tirai damask, hampir merasakan pakaian Mercedes melewatinya, dan nafas hangat anaknya, mengucapkan kata-kata ini, -- "Berani, ibu! Mari, ini bukan lagi rumah kita! " Kata-kata mati, langkah hilang di kejauhan. Jeneral itu menarik dirinya, berpaut pada tirai; dia mengeluarkan esakan yang paling mengerikan yang pernah terlepas dari pangkuan seorang bapa yang ditinggalkan pada masa yang sama oleh isteri dan anaknya. Dia tidak lama kemudian mendengar bunyi derap langkah besi jurulatih hackney, kemudian suara jurulatih, dan kemudian berguling kenderaan berat menggegarkan tingkap. Dia berlari ke bilik tidurnya untuk melihat sekali lagi semua yang dia sayangi di dunia; tetapi jurulatih hackney terus memandu dan ketua Mercedes mahupun anaknya tidak muncul di tingkap untuk melihat terakhir rumah atau bapa dan suami yang ditinggalkan. Dan pada saat ketika roda koc itu melintasi pintu masuk, satu laporan kedengaran, dan asap tebal keluar melalui salah satu kaca tingkap, yang pecah akibat letupan.
   


HTML

CSS:

复制代码 代码如下:

a{ text-decoration:none; warna:#fff;}
#rbox{

    lebar:620px;
    ketinggian:420px;
    kedudukan:tetap;
    atas: 50%;
    kiri: 50%;
    jidar:-210px 0 0 -310px;
    jejari sempadan:8px; /*圆角*/
    warna latar belakang:#999;
    indeks-z:3;
    paparan:tiada;   
}

.pergi{

    kedudukan:mutlak;
    kanan: 10px;
    atas: 10px;
    pelapik: 5px 12px;
    latar belakang: rgba(0,0,0,.4);
    bayang kotak: 0 0 0 2px rgba(255,255,255,.4);
    warna: #fff;
    jejari sempadan: 26px;
}

#topeng{

    warna latar belakang:#000;
    kedudukan:mutlak;
    atas:0;
    kiri:0;
    paparan:tiada;
    indeks-z:2;
}

#daftar{ z-index:1; warna:biru;}
.content{ width:800px; ketinggian:auto; margin:0 auto;}

JS:

复制代码 代码如下:

$(fungsi(){
 
//Klik untuk mendaftar
$("#register").klik(function(){
 
If(window.screen.availHeight > $(document.body).outerHeight(true)){
                             
//Apabila ketinggian kawasan kerja yang tersedia pada skrin >                $("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
         }lain{
                             
$("#mask").show().css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
                                                                                                 $("#rbox").show();                                                           });


//Laraskan lebar dan ketinggian topeng mengikut perubahan dalam tetingkap kelihatan penyemak imbas supaya topeng memenuhi penyemak imbas $(window).resize(function(){                                

//Tukar lebar dan ketinggian topeng mengikut perubahan dalam tetingkap penyemak imbas supaya topeng memenuhi keseluruhan pelayar
If($("#mask").css("lebar"!=0){

$ ("#topeng"). CSS ("" lebar "," "100%");

if(window.screen.availHeight > $(document.body).outerHeight(true)){
                                                                                     $("#mask").css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});

               } lain{

                                                                                     $("#mask").css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});

            }

}
});

$(".go").klik(function(){
 
          $("#mask").hide();
          $("#rbox").hide();
});
});



Fungsi ini selesai.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan