JS实现下拉菜单登录注册弹窗
这次给大家带来JS实现下拉菜单登录注册弹窗，JS实现下拉菜单登录注册弹窗的注意事项有哪些，下面就是实战案例，一起来看一下。
下拉菜单列表
<style>
*{
margin: 0px;
padding: 0px;
}
.menu{
width: 1100px;
height: 30px;
background-image: url(img/魅力罗兰Music炫图18.jpg);
margin-left: 200px;
margin-top: 50px;
}
.btn{
width: 183.3px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
font-size: 14px;
position: relative;
overflow: hidden;
transition: 0.5s;
}
.btn:hover{
cursor: pointer;
background-color: burlywood;
color: white;
max-height: 200px;
overflow: visible;
}
.btn ul{
list-style: none;
background-color: #008000;
}
</style>
<body>
<p class="menu">
<p class="btn">罗兰首页</p>
<p class="btn">歌曲专栏
<ul>
<li>流行</li>
<li>摇滚</li>
<li>蓝调</li>
<li>民谣</li>
</ul>
</p>
<p class="btn">音乐人专栏
<ul>
<li>内地</li>
<li>欧美</li>
<li>日韩</li>
<li>港台</li>
</ul>
</p>
<p class="btn">乐器专栏
<ul>
<li>钢琴</li>
<li>小提琴</li>
<li>吉他</li>
<li>架子鼓</li>
</ul>
</p>
<p class="btn">戏曲专栏
<ul>
<li>京剧</li>
<li>话剧</li>
<li>豫剧</li>
<li>黄梅戏</li>
</ul>
</p>
<p class="btn">魅力ROLAND体验区
<ul>
<li>新曲</li>
<li>唱片</li>
<li>MV</li>
</ul>
</p>
</p>
</body>登录注册效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
.login {
width: 100px;
height: 30px;
font-size: 25px;
line-height: 30px;
border: 1px solid black;
text-align: center;
background-color: darkcyan;
color: white;
}
.login:hover {
cursor: pointer;
background-color: greenyellow;
}
.mask {
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
z-index: 90;
}
.log-p {
width: 500px;
height: 300px;
background-color: white;
position: fixed;
z-index: 99;
}
</style>
</head>
<body>
<p class="mask" hidden></p>
<p class="log-p" hidden="hidden"></p>
<p class="login">登 录</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
</body>
</html>
<script>
var mask = document.getElementsByClassName("mask")[0];
var login = document.getElementsByClassName("log-p")[0];
var btn = document.getElementsByClassName("login")[0];
var clientWidth = document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight;
login.style.left = clientWidth / 2 - 250 + "px";
login.style.top = clientHeight / 2 - 150 + "px";
mask.style.height = document.body.clientHeight + "px";
window.onresize = function() {
var clientWidth = document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight;
login.style.left = clientWidth / 2 - 250 + "px";
login.style.top = clientHeight / 2 - 150 + "px";
}
btn.onclick = function(){
mask.removeAttribute("hidden");
login.removeAttribute("hidden");
}
mask.onclick = function(){
mask.setAttribute("hidden","");
login.setAttribute("hidden","hidden");
}
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci JS实现下拉菜单登录注册弹窗. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? Adakah saya akan ditemui jika saya mendaftar berbilang akaun?
Mar 25, 2024 am 09:41 AM
Sebagai platform yang menyepadukan rangkaian sosial dan e-dagang, Xiaohongshu telah menarik lebih ramai pengguna untuk menyertainya. Sesetengah pengguna berharap untuk mendaftar berbilang akaun untuk pengalaman yang lebih baik berinteraksi dengan Xiaohongshu. Jadi, bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? 1. Bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? 1. Gunakan nombor telefon mudah alih yang berbeza untuk mendaftar Pada masa ini, Xiaohongshu terutamanya menggunakan nombor telefon bimbit untuk mendaftar akaun. Pengguna kadangkala cuba membeli berbilang kad nombor telefon mudah alih dan menggunakannya untuk mendaftar berbilang akaun Xiaohongshu. Walau bagaimanapun, pendekatan ini mempunyai beberapa had, kerana membeli berbilang kad nombor telefon mudah alih adalah menyusahkan dan mahal. 2. Gunakan e-mel untuk mendaftar Selain nombor telefon bimbit anda, e-mel anda juga boleh digunakan untuk mendaftar akaun Xiaohongshu. Pengguna boleh menyediakan berbilang alamat e-mel dan kemudian menggunakan alamat e-mel ini untuk mendaftar akaun. tetapi
Cara mendaftar akaun Manwa Comics
Feb 28, 2024 am 08:00 AM
Pada platform Komik Manwa, terdapat sumber komik yang kaya menunggu untuk diterokai oleh semua orang. Selagi anda mudah memasuki platform rasmi Komik Manwa, anda boleh menikmati semua jenis karya komik yang menarik. Semua orang boleh dengan mudah mencari komik kegemaran mereka untuk dibaca mengikut pilihan mereka sendiri. Jadi bagaimana untuk mendaftar akaun rasmi Komik Manwa? Editor laman web ini akan membawakan anda panduan tutorial terperinci ini, dengan harapan dapat membantu semua orang yang memerlukan. Pintu masuk rasmi Komik Manwa: https://fuw11.cc/mw666 Alamat muat turun aplikasi Komik Manwa: https://www.siemens-home.cn/soft/74440.html Pintu masuk bukan kawasan tanah besar Manwa Comics: https: /
Bagaimana untuk menyemak perkara yang didaftarkan dengan nombor telefon bimbit 'Penjelasan terperinci: Kaedah pertanyaan APP untuk pendaftaran nombor telefon bimbit'
Feb 07, 2024 am 08:24 AM
Saya tidak tahu sama ada anda mempunyai pengalaman sedemikian Telefon mudah alih anda sering menerima beberapa mesej teks yang tidak dapat dijelaskan, atau maklumat pendaftaran untuk beberapa tapak web atau maklumat pengesahan lain, nombor telefon mudah alih kami mungkin terikat pada banyak tapak web yang tidak dikenali diri kita Walaupun anda tidak tahu, apa yang saya akan kongsikan dengan anda hari ini adalah untuk mengajar anda cara menyahikat semua tapak web yang tidak dikenali dengan satu klik. Langkah 1: Buka platform perkhidmatan nombor Teknik ini sangat praktikal. Langkah-langkahnya adalah seperti berikut: Buka WeChat, klik ikon tambah dalam kotak carian, pilih Tambah Rakan, dan kemudian masukkan platform perkhidmatan nombor kod untuk mencari. Kita dapat melihat bahawa terdapat platform perkhidmatan nombor Sudah tentu, ia adalah milik institusi awam dan telah dilancarkan oleh Institut Teknologi Maklumat dan Komunikasi Negara Ia boleh membantu semua orang melepaskan maklumat nombor telefon bimbit dengan satu klik. Langkah 2: Semak sama ada telefon telah ditandakan untuk saya
Bagaimana untuk mendaftar akaun Xiaohongshu? Apakah yang diperlukan untuk mendaftar akaun Xiaohongshu?
Mar 22, 2024 am 10:16 AM
Xiaohongshu, platform sosial yang menyepadukan kehidupan, hiburan, membeli-belah dan perkongsian, telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian ramai orang muda. Jadi, bagaimana untuk mendaftar akaun Xiaohongshu? 1. Bagaimana untuk mendaftar akaun Xiaohongshu? 1. Buka laman web rasmi Xiaohongshu atau muat turun APP Xiaohongshu. Klik butang "Daftar" di bawah dan anda boleh memilih kaedah pendaftaran yang berbeza. Pada masa ini, Xiaohongshu menyokong pendaftaran dengan nombor telefon mudah alih, alamat e-mel dan akaun pihak ketiga (seperti WeChat, QQ, Weibo, dll.). 3. Isikan maklumat yang berkaitan. Mengikut kaedah pendaftaran yang dipilih, isikan nombor telefon bimbit, alamat e-mel atau maklumat akaun pihak ketiga yang sepadan. 4. Tetapkan kata laluan. Tetapkan kata laluan yang kukuh untuk memastikan akaun anda selamat. 5. Lengkapkan pengesahan. Ikut gesaan untuk melengkapkan pengesahan telefon mudah alih atau pengesahan e-mel. 6. Menyempurnakan individu
Bagaimana untuk mendaftar 163 e-mel
Feb 14, 2024 am 09:20 AM
Sesetengah pengguna mendapati bahawa mereka tidak mempunyai akaun apabila mereka ingin menggunakan peti mel 163 Jadi apakah yang perlu mereka lakukan jika mereka perlu mendaftar akaun pada masa ini? Sekarang mari kita lihat kaedah pendaftaran e-mel 163 yang dibawa oleh editor. 1. Mula-mula, cari laman web rasmi 163 E-mel dalam pelayar dan klik [Daftar akaun baharu] pada halaman 2. Kemudian pilih [E-mel Percuma] atau [E-mel VIP]; dan klik [Sekarang Hanya daftar];
Bagaimana untuk mendaftar akaun Xiaohongshu? Bagaimana untuk memulihkan jika akaunnya tidak normal?
Mar 21, 2024 pm 04:57 PM
Sebagai salah satu platform perkongsian gaya hidup paling popular di dunia, Xiaohongshu telah menarik sejumlah besar pengguna. Jadi, bagaimana untuk mendaftar akaun Xiaohongshu? Artikel ini akan memperkenalkan anda kepada proses pendaftaran akaun Xiaohongshu secara terperinci, dan menjawab soalan tentang cara memulihkan akaun Xiaohongshu yang tidak normal. 1. Bagaimana untuk mendaftar akaun Xiaohongshu? 1. Muat turun APP Xiaohongshu: Cari dan muat turun APP Xiaohongshu dalam gedung aplikasi mudah alih, dan bukanya selepas pemasangan selesai. 2. Daftar akaun: Selepas membuka APP Xiaohongshu, klik butang "Saya" di penjuru kanan sebelah bawah halaman utama, dan kemudian pilih "Daftar". 3. Isikan maklumat pendaftaran: Isikan nombor telefon bimbit, tetapkan kata laluan, kod pengesahan dan maklumat pendaftaran lain mengikut arahan. 4. Lengkapkan maklumat peribadi: Selepas pendaftaran berjaya, ikut gesaan untuk melengkapkan maklumat peribadi, seperti nama, jantina, hari lahir, dsb. 5. Tetapan
Cara membuat menu lungsur turun dalam jadual WPS
Mar 21, 2024 pm 01:31 PM
Cara membuat menu lungsur turun jadual WPS: Selepas memilih sel di mana anda ingin menetapkan menu lungsur, klik "Data", "Kesahan" dalam urutan, dan kemudian buat tetapan yang sepadan dalam kotak dialog pop timbul untuk menurunkan menu kami. Sebagai perisian pejabat yang berkuasa, WPS mempunyai keupayaan untuk mengedit dokumen, jadual data statistik, dll., yang memberikan banyak kemudahan untuk ramai orang yang perlu berurusan dengan teks, data, dll. Untuk menggunakan perisian WPS dengan mahir untuk memberikan kami banyak kemudahan, kami perlu menguasai pelbagai operasi perisian WPS yang sangat asas Dalam artikel ini, editor akan berkongsi dengan anda cara menggunakan perisian WPS. operasi menu bawah dalam jadual WPS yang muncul. Selepas membuka borang WPS, mula-mula pilih
Bagaimana untuk mendaftar akaun qooapp
Mar 19, 2024 pm 08:58 PM
qooapp adalah perisian yang boleh memuat turun banyak permainan, jadi bagaimana untuk mendaftar akaun Pengguna perlu mengklik butang "Daftar" jika mereka belum mempunyai pas, dan kemudian memilih kaedah pendaftaran. Pengenalan kaedah pendaftaran akaun ini sudah cukup untuk memberitahu anda cara mengendalikannya. Berikut adalah pengenalan terperinci, jadi sila lihat. Bagaimana untuk mendaftar akaun qooapp? 2. Kemudian pilih kaedah log masuk yang anda perlukan. 3. Anda boleh menggunakannya terus selepas itu. Pendaftaran laman web rasmi: 1. Buka laman web https://apps.ppaooq.com/ dan klik pada sudut kanan atas untuk mendaftar. 2. Pilih pendaftaran
