Code d'effet de boîte flottante de connexion implémenté par jQuery

Code d'effet de boîte flottante de connexion implémenté par jQuery_jquery

WBOY

Libérer： 2016-05-16 15:38:11

original

1318 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effet de boîte flottante de connexion implémenté par jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code de boîte flottante de connexion jQuery. Après avoir cliqué sur le bouton de connexion, vous verrez un calque flottant apparaître avec un bouton de fermeture dans le coin supérieur droit. Ce calque flottant ne prend pas en charge le glisser. boîte que l'on voit souvent sur Internet.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-float-login-dlg-style-demo/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery登录浮动框代码</title>
<style type="text/css">
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:760px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}
.fd{ width:100%; height:auto; position:absolute; top:150px; left:0px; z-index:1; display:none;}
.fd_box{ width:320px; height:auto; margin:0px auto; position:relative; }
.tm_box{ width:300px; height:200px; padding:10px; background-color:#FFFFFF; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; FILTER: alpha(opacity=50); opacity: 0.5; -moz-opacity: 0.5; position:absolute; top:0px; left:0px; z-index:2;}
.denglu_box{ width:280px; height:180px; padding:10px; background-color:#FFFFFF; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; position:absolute; top:10px; left:10px; z-index:3; font-family:"宋体";}
.denglu_box h1{ width:270px; height:30px; line-height:30px; font-size:14px; margin:0px; padding:0px 5px; font-weight:100; color:#666666; border-bottom:1px solid #009999;}
.denglu_box span{ color:#666666; display:block; margin:10px 0px; padding:0px 5px;}
.guanbi{ width:14px; height:13px; background-image:url(images/close.gif); background-repeat:no-repeat; position:absolute; top:25px; right:25px; z-index:4; cursor: pointer;}
.box{ width:760px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9;}
.box img{ margin:50px auto; display:block; border:0px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#mj").click( function(){
   $(".fd").show();
 return false;
  });
  $(".guanbi").click( function(){
  $(".fd").hide();
  });
})
</script>
</head>
<body>
<div class="top">
<div class="logo"><a href="#">MJBlog</a></div>
<div class="denglu"><a href="denglu.html" id="mj">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>
<div class="box"><a href="#"><img src="images/wall3.jpg" /></a></div>
<div class="fd">
<div class="fd_box">
<div class="tm_box"></div>
<div class="denglu_box">
<h1>用户登录</h1>
<span>用户名：<input name="" type="text" /></span>
<span>密  码：<input name="" type="text" /></span>
</div>
<div class="guanbi"></div>
</div>
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.