Rumah hujung hadapan web tutorial js 通过遮罩层实现浮层DIV登录的js代码_javascript技巧

通过遮罩层实现浮层DIV登录的js代码_javascript技巧

May 16, 2016 pm 05:01 PM
Log masuk lapisan topeng

这个就没什么好说的了。。直接上代码啊!!

首先是HTML的代码。其中包含了登录点击按钮以及一个简陋的登录框。

复制代码 代码如下:






什么都没有用。。。


什么都没有用。。。


什么都没有用。。。


什么都没有用。。。




























































接着是JS脚本代码的实现
复制代码 代码如下:



这里只有显示遮罩层以及登录框的代码。至于隐藏的代码也很简单,就是将遮罩层(shade)的DIV块以及登录框(login)的DIV块的display属性都设置成none应该就没有什么问题了。。

至此,一个简单的通过遮罩层实现浮层DIV登录的功能就实现了。关于美工方面的工作就由大家自行解决了。


在这里,有一个功能求助大家啊。。就是如何让弹出的登录框的DIV块跟随滚动条移动呢??

我的实验代码如下。
复制代码 代码如下:

function loginDivCenter (){
loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2
- loginDivHeight / 2) + "px";
loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2
- loginDivWidth / 2) + "px";
}

function scall (){
loginDivCenter();
}

window.onscroll=scall;
window.onresize=scall;
window.onload=scall;

但是很不幸的是本人失败了。。网上找了很多,但都不是符合要求的。大多是设置一个setInterval来实现。本人觉得这样做并不理想啊。。。

求各路大神指教啊!
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah yang perlu saya lakukan jika saya memuat turun kertas dinding orang lain selepas log masuk ke akaun lain pada mesin kertas dinding? Apakah yang perlu saya lakukan jika saya memuat turun kertas dinding orang lain selepas log masuk ke akaun lain pada mesin kertas dinding? Mar 19, 2024 pm 02:00 PM

Apabila anda log masuk ke akaun stim orang lain pada komputer anda, dan akaun orang lain itu kebetulan mempunyai perisian kertas dinding, stim akan memuat turun kertas dinding yang dilanggan ke akaun orang lain secara automatik selepas bertukar kembali ke akaun anda sendiri Pengguna boleh menyelesaikan masalah ini dengan mematikan penyegerakan awan wap. Apa yang perlu dilakukan jika enjin kertas dinding memuat turun kertas dinding orang lain selepas log masuk ke akaun lain 1. Log masuk ke akaun stim anda sendiri, cari penyegerakan awan dalam tetapan, dan matikan penyegerakan awan stim. 2. Log masuk ke akaun Steam orang lain yang anda log masuk sebelum ini, buka Bengkel Kreatif Kertas Dinding, cari kandungan langganan, dan kemudian batalkan semua langganan. (Sekiranya anda tidak dapat mencari kertas dinding pada masa hadapan, anda boleh mengumpulnya dahulu dan kemudian membatalkan langganan) 3. Tukar semula ke wap anda sendiri

Bagaimanakah saya boleh log masuk ke akaun saya sebelum ini di Xiaohongshu? Apakah yang perlu saya lakukan jika nombor asal hilang selepas ia ditukar? Bagaimanakah saya boleh log masuk ke akaun saya sebelum ini di Xiaohongshu? Apakah yang perlu saya lakukan jika nombor asal hilang selepas ia ditukar? Mar 21, 2024 pm 09:41 PM

Dengan perkembangan pesat media sosial, Xiaohongshu telah menjadi platform popular untuk ramai anak muda untuk berkongsi kehidupan mereka dan meneroka produk baharu. Semasa penggunaan, kadangkala pengguna mungkin menghadapi kesukaran untuk log masuk ke akaun sebelumnya. Artikel ini akan membincangkan secara terperinci cara menyelesaikan masalah log masuk ke akaun lama di Xiaohongshu, dan cara menangani kemungkinan kehilangan akaun asal selepas menukar pengikatan. 1. Bagaimana untuk log masuk ke akaun sebelumnya Xiaohongshu? 1. Dapatkan kata laluan dan log masuk. Jika anda tidak log masuk ke Xiaohongshu untuk masa yang lama, akaun anda mungkin dikitar semula oleh sistem. Untuk memulihkan hak akses, anda boleh cuba log masuk ke akaun anda sekali lagi dengan mendapatkan semula kata laluan anda. Langkah-langkah operasi adalah seperti berikut: (1) Buka Aplikasi Xiaohongshu atau laman web rasmi dan klik butang "Log Masuk". (2) Pilih "Retrieve Password". (3) Masukkan nombor telefon bimbit yang anda gunakan semasa mendaftar akaun anda

Discuz penyelesaian masalah log masuk latar belakang didedahkan Discuz penyelesaian masalah log masuk latar belakang didedahkan Mar 03, 2024 am 08:57 AM

Penyelesaian masalah log masuk latar belakang Discuz didedahkan. ramai webmaster. Walau bagaimanapun, dengan tepat kerana fungsinya yang berkuasa, kadangkala kami menghadapi beberapa masalah semasa menggunakan Discuz, seperti masalah log masuk latar belakang. Hari ini, kami akan mendedahkan penyelesaian kepada masalah log masuk latar belakang Discuz dan memberikan contoh kod khusus, dengan harapan dapat membantu mereka yang memerlukan

Kulit koleksi Ibaraki Douji 'Onmyoji' boleh diperolehi sebaik sahaja anda log masuk, dan kulit Zen Heart Cloud Mirror baharu akan dilancarkan tidak lama lagi! Kulit koleksi Ibaraki Douji 'Onmyoji' boleh diperolehi sebaik sahaja anda log masuk, dan kulit Zen Heart Cloud Mirror baharu akan dilancarkan tidak lama lagi! Jan 05, 2024 am 10:42 AM

Beribu-ribu hantu menjerit di pergunungan dan padang, dan bunyi penyerahan senjata hilang. Jeneral hantu yang bergegas ke atas pergunungan, dengan semangat juang yang berkobar-kobar di dalam hati mereka, menggunakan api sebagai sangkakala mereka untuk memimpin ratusan hantu untuk menyerang. ke dalam pertempuran. [Blazing Flame Bairen·Kulit Koleksi Doji Ibaraki kini dalam talian] Tanduk hantu berkobar-kobar dengan nyala api, mata yang disepuh dipenuhi dengan semangat juang yang sukar dikawal, dan kepingan perisai jed putih menghiasi baju, menunjukkan momentum yang tidak terkawal dan liar yang hebat. syaitan. Pada lengan baju yang berkibar-kibar seputih salji, nyala api merah melekat dan berjalin, dan corak emas dicetak pada mereka, menyalakan warna merah lembayung dan ajaib. Wasiat-o'-the-wips yang dibentuk oleh kuasa syaitan pekat meraung, dan api yang ganas menggoncang gunung Iblis dan hantu yang telah kembali dari api penyucian, mari kita menghukum penceroboh itu bersama-sama. [Bingkai avatar dinamik eksklusif·Blazing Flame Bailian] [Ilustrasi eksklusif·Firework General Soul] [Penghargaan Biografi] [Cara mendapatkan] Kulit koleksi Ibaraki Doji·Blazing Flame Bailian akan tersedia di kedai kulit selepas penyelenggaraan pada 28 Disember.

Cara log masuk ke versi PC Kuaishou - Cara log masuk ke versi PC Kuaishou Cara log masuk ke versi PC Kuaishou - Cara log masuk ke versi PC Kuaishou Mar 04, 2024 pm 03:30 PM

Baru-baru ini, beberapa rakan telah bertanya kepada saya bagaimana untuk log masuk ke versi komputer Kuaishou Berikut adalah kaedah log masuk untuk versi komputer Kuaishou Rakan yang memerlukannya boleh datang dan mengetahui lebih lanjut. Langkah 1: Mula-mula, cari tapak web rasmi Kuaishou di Baidu dalam penyemak imbas komputer anda. Langkah 2: Pilih item pertama dalam senarai hasil carian. Langkah 3: Selepas memasuki halaman utama laman web rasmi Kuaishou, klik pada pilihan video. Langkah 4: Klik pada avatar pengguna di sudut kanan atas. Langkah 5: Klik kod QR untuk log masuk dalam menu log masuk pop timbul. Langkah 6: Kemudian buka Kuaishou pada telefon anda dan klik pada ikon di sudut kiri atas. Langkah 7: Klik pada logo kod QR. Langkah 8: Selepas mengklik ikon imbasan di penjuru kanan sebelah atas antara muka kod QR Saya, imbas kod QR pada komputer anda. Langkah 9: Akhirnya log masuk ke versi komputer Kuaishou

Cuba penyelesaian 3 langkah mudah ini untuk menyelesaikan isu tidak dapat melog masuk ke akaun Microsoft anda Cuba penyelesaian 3 langkah mudah ini untuk menyelesaikan isu tidak dapat melog masuk ke akaun Microsoft anda Sep 07, 2023 am 10:09 AM

Terdapat pelbagai sebab mengapa anda tidak boleh log masuk ke akaun Microsoft anda. Walaupun ia jarang berlaku, apabila ia berlaku, ia boleh mengecewakan. Sebagai contoh, dalam Windows 11, salah satu sebab mengapa ini berlaku adalah kerana aplikasi terbina dalam Microsoft Store kadangkala rosak dan berhenti berfungsi dengan betul. Sebagai contoh, pengguna Reddit ini menghadapi masalah ini, dan pengguna lain datang untuk menyelamatkan dengan penyelesaian mudah yang nampaknya berjaya akhirnya. Untuk dapat log masuk semula ke akaun Microsoft anda, semua apl Microsoft Store terbina dalam perlu dipasang semula. Inilah perkaranya. Buka aplikasi Powershell sebagai pentadbir. Masukkan arahan berikut: Get-Ap

Bagaimana untuk log masuk ke dua peranti pada Quark Bagaimana untuk log masuk ke dua peranti pada Quark Feb 23, 2024 pm 10:55 PM

Bagaimana untuk log masuk ke dua peranti dengan Quark Browser menyokong log masuk ke dua peranti pada masa yang sama, tetapi kebanyakan rakan tidak tahu cara untuk log masuk ke dua peranti dengan Quark Browser Seterusnya, editor membawa pengguna Quark untuk log masuk kepada dua peranti tutorial grafik kaedah, pengguna yang berminat datang dan lihat! Tutorial penggunaan Pelayar Quark Cara log masuk ke dua peranti 1. Mula-mula buka APP Pelayar Quark dan klik [Cakera Rangkaian Quark] pada halaman utama 2. Kemudian masukkan antara muka Cakera Rangkaian Quark dan pilih fungsi perkhidmatan [My Backup]. ; 3. Akhir sekali, pilih [Tukar Peranti] untuk log masuk ke dua peranti baharu.

Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Saya hanya ingat bagaimana untuk mendapatkan semula akaun saya? Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Saya hanya ingat bagaimana untuk mendapatkan semula akaun saya? Mar 23, 2024 pm 05:31 PM

Xiaohongshu kini telah disepadukan ke dalam kehidupan seharian ramai orang, dan kandungannya yang kaya serta kaedah operasi yang mudah membuatkan pengguna menikmatinya. Kadang-kadang, kita mungkin terlupa kata laluan akaun Memang menjengkelkan untuk hanya mengingati akaun tetapi tidak boleh log masuk. 1. Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Apabila kami terlupa kata laluan kami, kami boleh log masuk ke Xiaohongshu melalui kod pengesahan pada telefon bimbit kami. Operasi khusus adalah seperti berikut: 1. Buka Aplikasi Xiaohongshu atau versi web Xiaohongshu 2. Klik butang "Log Masuk" dan pilih "Log Masuk Akaun dan Kata Laluan" 3. Klik butang "Lupa kata laluan anda?" . Masukkan nombor akaun anda Klik "Seterusnya"; 5. Sistem akan menghantar kod pengesahan ke telefon bimbit anda, masukkan kod pengesahan dan klik "OK"; Anda juga boleh menggunakan akaun pihak ketiga (seperti

See all articles