這次給大家帶來js實現下拉列表登入註冊彈窗，js實現下拉列表登入註冊彈窗的注意事項有哪些，下面就是實戰案例，一起來看一下。
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;
羅蘭首頁
歌曲專欄
**人專欄
樂器專欄
戲曲專欄
魅力roland體驗區
登入註冊效果
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;
登 錄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");
推薦閱讀：
原生JS實現下拉選項效果
html 愛好學習 js function hasclassname targetparentnode,active removeclass targetparentnode,active addclass targetparentnode,active 獲取所有兄弟元素 function sibl...
原生JS實現下拉載入
tips 實現的原理是通過獲取 獲取滾動條當前的位置 獲取當前可視範圍的高度 獲取文件完整的高度 一 獲取滾動條當前的位置 獲取滾動條當前的位置 function getscrolltop else if document.body return scrolltop 二 獲取當前可視範圍的高度 獲取...
js php實現下拉分頁
js 起始頁數，每頁顯示資料已經在後台寫死 var curpage 1 window on scroll function post flfg postdata,function response datastr datastr response i title datastr time datas...