jQuery實現的點選彈出登陸視窗效果

admin發表於2017-03-26
jQuery

現在很多網頁的登陸功能都採用彈出視窗的形式，而不是過去的點選出現一個新的頁面，然後再進行登陸。

這種效果，能夠有效的增加頁面的動態效果和美觀度，也可以節省一個頁面，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.btn{
  position:relative;
  cursor:pointer;
  display:inline-block;
  vertical-align:middle;
  font-size:12px;
  font-weight:bold;
  height:27px;
  line-height:27px;
  min-width:52px;
  padding:0 12px;
  text-align:center;
  text-decoration:none;
  border-radius:2px;
  border:1px solid #ddd;
  color:#666;
  background-color:#f5f5f5;
}
.login-body{
  padding:60px 15px;
  color:#444;
  height:148px;
}
.ipt{
  border:solid 1px #d2d2d2;
  border-left-color:#ccc;
  border-top-color:#ccc;
  border-radius:2px;
  box-shadow:inset 0 1px 0 #f8f8f8;
  background-color:#fff;
  padding:4px 6px;
  height:21px;
  line-height:21px;
  color:#555;
  width:180px;
  vertical-align:baseline;
}
.dform{
  padding:80px 60px 40px;
  text-align:center;
}
.signin{
  margin:-50px -20px -50px 90px;
  text-align:left;
  font-size:14px;
}
.signin h4{
  color:#999;
  font-weight:100;
  margin-bottom:20px;
  font-size:12px;
}
.signin li{
  padding-left:80px;
  margin-bottom:15px;
}
.signin ol{
  list-style-type:none;
}
.signin li strong{
  float:left;
  margin-left:-80px;
  width:80px;
  text-align:right;
  line-height:32px;
}
.signin .btn{
  margin-bottom:10px;
}
.body-color{
  z-index:9998;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity:0.4;
  filter:alpha(opacity = 40);
  display:none
}
.hide-body{
  z-index:9999;
  position:fixed;
  top:30%;
  left:40%;
  width:1000px;
  height:618px;
  margin:-180px 0 0 -330px;
  border-radius:5px;
  border:solid 2px #666;
  background-color:#fff;
  display:none;
  box-shadow:0 0 10px #666;
}
.close-window{
  border-bottom:1px solid #ddd;
  padding:22px;
  position:relative;
}
.close-window .close{
  float:right;
  color:#999;
  padding:5px;
  margin:-2px -5px -5px;
  font:bold 14px/14px simsun;
  text-shadow:0 1px 0 #ddd
}
.close-window .close:hover{
  color:#444;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function($){  
  $('.login').click(function(){ 
    $('.body-color').fadeIn(100);
    $('.hide-body').slideDown(200);
  })  
  $('.close-window .close').click(function(){  
    $('.body-color').fadeOut(100);
    $('.hide-body').slideUp(200);
  }) 
})  
</script>
</head>
<body>
<div> <a class="login btn" href="javascript:;">點選檢視效果</a> </div>
<div class="hide-body">
  <div class="close-window"> <a href="javascript:;" title="關閉" class="close">×</a> </div>
  <div class="login-body dform">
    <form class="signin" name="loginform" action="" method="post">
      <ol>
        <li>
          <h4>你必須先登入！</h4>
        </li>
        <li>
          <label for="username">使用者名稱：</label>
          <input class="ipt" type="text" id="username" value="softwhy.com" size="20"/>
        </li>
        <li>
          <label for="password">密 碼：</label>
          <input class="ipt" type="password" id="password" value="******" size="20"/>
        </li>
        <li>
          <input class="btn btn-primary" type="submit" name="submit" value=" 登 錄 " />
        </li>
      </ol>
    </form>
  </div>
</div>
<div class="body-color"></div>
</body>
</html>

相關文章