遮罩窗体弹出登录页面代码实现
生活随笔
收集整理的這篇文章主要介紹了
遮罩窗体弹出登录页面代码实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先上效果圖(本人喜歡胡巴，背景用了胡巴)，鼠標滑過頁面，圖片變暗，透明度為0.4，同時彈出登錄窗口。
接下來先看css代碼(寫的可能不是很規范，根據調整樣式順序寫的)
body{background-color: black;width: 100%;height: auto;overflow: hidden;}img{width: 1550px;height: auto;}.logIn{width:340px;height:280px;background-color: white;border-radius: 10px;border: 1px solid grey;}.login-title{margin: 0 auto;width: 100%;height:45px;background-color: #80236b; }h3{line-height: 45px;text-align: center;}.login-content{margin:30px 0 0 0;}.login-content div{width:200px;margin:0 auto;padding-bottom:25px;}.affix{top:200px;right: 200px;}label{width: 100%;line-height: 40px;}.button{margin: -10px 0 0 80px;width:180px;}input.log{width:180px;margin: 0 auto;color: white;background-color: #80236b;border-radius: 15px;height: 40px;font: 16px "microsoft yahei";}p.remember-name{font: 14px "microsoft yahei";color: dimgrey;}input{border-radius: 5px;font: 14px "microsoft yahei";}/*placeholder樣式*/::-webkit-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;}::-moz-placeholder { font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;} /* firefox 19+ */:-ms-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;} /* ie */input:-moz-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;}.glyphicon{color:#80236b; }html代碼（代碼簡單）
<body> <img src="dist/images/link.jpg" alt="遮罩圖片" style="z-index: -1"/><div class="logIn affix" style="display: none;z-index:1000"><div class="login-title"><h3>用戶登錄</h3></div><div class="login-content"><div class="user"><label class="user glyphicon glyphicon-user"></label><input type="text" placeholder="員工賬號" /></div><div class="pass"><lable class="password glyphicon glyphicon-lock"> </lable><input type="password" placeholder="密碼" /></div></div><div class="button"><p class="remember-name"> <input class="remember-name" type="radio" value="記住賬號和密碼" name="remember"/>記住賬號和密碼</p><input class="log" type="button" value="登錄"/></div></div> </body>jquery代碼
//遮罩窗體彈出登錄框$(function(){$('body').hover( function(event){$('img').fadeTo(1000,0.4);//1000為速度，0.4為透明度$('.logIn').show(1000);});});? ? ? ? 本人做這個練習就是想聯系一下自己寫jquery代碼，有問題之處還請多多指正！
轉載于:https://www.cnblogs.com/luoyishamai/p/5066215.html
總結
以上是生活随笔為你收集整理的遮罩窗体弹出登录页面代码实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 集合视图控制器(CollectionVi
- 下一篇： Mongodb 笔记01 Mongo