仿百度登陆弹窗的JS或者jquery代码 求详细 100

求仿百度登陆弹窗的JS或者jquery的详细代码... 求仿百度登陆弹窗的JS或者jquery的详细代码 展开
 我来答
百度网友72620e0
推荐于2017-05-20 · 超过30用户采纳过TA的回答
知道答主
回答量:50
采纳率:0%
帮助的人:55万
展开全部
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>div布局</title>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>

    <style type="text/css">
        .corInsertHref
        {
            position: absolute;
            z-index: 10000;
            width: 370px;
            float: left;
            display: none;
            background-color: #fff;
            padding: 10px;
        }
        .corBackground
        {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #000;
            top: 0;
            left: 0;
            filter: alpha(opacity=30);
            -moz-opacity: 0.30;
            -khtml-opacity: 0.30;
            opacity: 0.30;
            z-index: 9999;
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            //点击登录按钮 弹出层并初始化弹出层位置
            $("#btnlogin").click(function() {
                $("#corBackground").animate({ opacity: "show" }, "slow");
                $("#corInsertHref").animate({ opacity: "show" }, "slow");
                autoSize($("#corInsertHref"));
            });
            //窗口大小缩放事件
            $(window).resize(function() {
                autoSize($("#corInsertHref"));
            });
            //窗口大小缩放时调整弹出层的位置
            var autoSize = function(corObj) {
                var wWidth = $(window).width(), wHeight = $(window).height();
                var ihWidth = corObj.outerWidth(true), ihHeight = corObj.outerHeight(true);

                corObj.css({ "top": ((wHeight - ihHeight) / 2) + "px", "left": ((wWidth - ihWidth) / 2) + "px" });
            }
        });
    </script>

</head>
<body>
    <span id="btnlogin">登录</span>
    <div id="corInsertHref" class="corInsertHref">
        <p>
            账号<input id="txtName" type="text" /></p>
        <p>
            密码<input id="txtPwd" type="text" /></p>
        <p>
            <input type="button" value="登 录" /></p>
    </div>
    <div id="corBackground" class="corBackground">
    </div>
</body>
</html>

粗略的写了下,可以吗?

百度网友89b6639
2015-05-19 · TA获得超过194个赞
知道答主
回答量:36
采纳率:100%
帮助的人:16.7万
展开全部
你贴个图,看看效果。应该能帮你实现。
追问

就是点了登陆出来这个弹窗

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
每日智力题
2015-05-19 · TA获得超过2068个赞
知道小有建树答主
回答量:128
采纳率:0%
帮助的人:32.2万
展开全部
代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %>
<!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 runat="server">
<title></title>
<link href="autoSearchText.css" type="text/css" rel="Stylesheet" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<%if (false){ %>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<%} %>
<script src="jquery.autoSearchText.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn: alertMsg });
});
function alertMsg(vl){
alert('你将要搜索的关键字是: '+vl);
}
/*加载数据*/
function getData(val) {
var arrData = new Array();
if (val != "") {
$.ajax({
type: "post",
async: false, //控制同步
url: "getData.ashx",
data: "param=" + val,
dataType: "json",
cache: false,
success: function(data) {
for (var i = 0; i < data.length; i++) {
if (val == data[i].Code.substring(0, val.length))
arrData.push(data[i].Code);
}
},
Error: function(err) {
alert(err);
}
});
}
return arrData;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="autoSearchText" type="text" value="请输入编码" enableviewstate="false"/>
<br />
<input id="Text1" type="text" style=" display:none;"/>
</div>
</form>
</body>
</html>

CSS:

复制代码代码如下:

.autoSearchText{
border:solid 1px #CFCFCF;
height:20px;
color:Gray;
}
.menu_v{
margin:0;
padding:0;
line-height:20px;
font-size:12px;
list-style-type:none;
}
.menu_v li{
margin:0;
padding:0;
line-height:20px;
font-size:14px;
list-style-type:none;
float:none;
}
.menu_v li span{
color:Red;
}
#autoSearchItem{
border:solid 1px #CFCFCF;
visibility:hidden;
position:absolute;
background-color:white;
overflow-y:auto;
}

JS:

复制代码代码如下:

1 ///<reference path="jquery-1.5.1.js" />
2
3 (function($) {
4 var itemIndex = 0;
5
6 $.fn.autoSearchText = function(options) {
7 //以下为该插件的属性及其默认值
8 var deafult = {
9 width: 200, //文本框宽
itemHeight: 150, // 下拉框高
minChar: 1, //最小字符数(从第几个开始搜索)
datafn: null, //加载数据函数
fn: null //选择项后触发的回调函数
};
var textDefault = $(this).val();
var ops = $.extend(deafult, options);
$(this).width(ops.width);
var autoSearchItem = '<div id="autoSearchItem"><ul class="menu_v"></ul></div>';
$(this).after(autoSearchItem);
$('#autoSearchItem').width(ops.width + 2); //设置项宽
$('#autoSearchItem').height(ops.itemHeight); //设置项高
$(this).focus(function() {
if ($(this).val() == textDefault) {
$(this).val('');
$(this).css('color', 'black');
}
});
var itemCount = $('li').length; //项个数
/*鼠标按下键时,显示下拉框,并且划过项时改变背景色及赋值给输入框*/
$(this).bind('keyup', function(e) {
if ($(this).val().length >= ops.minChar) {
var position = $(this).position();
$('#autoSearchItem').css({ 'visibility': 'visible', 'left': position.left, 'top': position.top + 24 });
var data = ops.datafn($(this).val());
initItem($(this), data);
var itemCount = $('li').length;
switch (e.keyCode) {
case 38: //上
if (itemIndex > 1) {
itemIndex--;
}
$('li:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' });
$(this).val($('li:nth-child(' + itemIndex + ')').find('font').text());
break;
case 40: //下
if (itemIndex < itemCount) {
itemIndex++;
}
$('li:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' });
$(this).val($('li:nth-child(' + itemIndex + ')').find('font').text());
break;
case 13: //Enter
if (itemIndex > 0 && itemIndex <= itemCount) {
$(this).val($('li:nth-child(' + itemIndex + ')').find('font').text());
$('#autoSearchItem').css('visibility', 'hidden');
ops.fn($(this).val());
}
break;
default:
break;
}
}
});
/*点击空白处隐藏下拉框*/
$(document).click(function() {
$('#autoSearchItem').css('visibility', 'hidden');
});
};
/*获取文本框的值*/
$.fn.getValue = function() {
return $(this).val();
};
/*初始化下拉框数据,鼠标移过每项时,改变背景色并且将项的值赋值给输入框*/
function initItem(obj, data) {
var str = "";
if (data.length == 0) {
$('#autoSearchItem ul').html('<div style="text-align:center;color:red;">无符合数据<div>');
}
else {
for (var i = 1; i <= data.length; i++) {
str += "<li><span>" + i + "/" + data.length + "</span>\r<font>" + data[i - 1] + "</font></li>";
}
$('#autoSearchItem ul').html(str);
}
/*点击项时将值赋值给搜索文本框*/
$('li').each(function() {
$(this).bind('click', function() {
obj.val($(this).find('font').text());
$('#autoSearchItem').css('visibility', 'hidden');
});
});
/*鼠标划过每项时改变背景色*/
$('li').each(function() {
$(this).hover(
function() {
$('li:nth-child(' + itemIndex + ')').css({ 'background': 'white', 'color': 'black' });
itemIndex = $('li').index($(this)[0]) + 1;
$(this).css({ 'background': 'blue', 'color': 'white' });
obj.val($('li:nth-child(' + itemIndex + ')').find('font').text());
},
function() {
$(this).css({ 'background': 'white', 'color': 'black' });
}
);
});
};
})(jQuery);

getdata.ashx

复制代码代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace table
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class getData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
string value = GetResult();
context.Response.Write(value);
context.Response.End();
}
private string GetResult()
{
string result = string.Empty;
result = @"
[{""id"":""1"",""Code"":""1374123""},
{""id"":""2"",""Code"":""1374133""},
{""id"":""3"",""Code"":""1374143""},
{""id"":""4"",""Code"":""1374153""},
{""id"":""5"",""Code"":""1374163""},
{""id"":""6"",""Code"":""1374173""},
{""id"":""7"",""Code"":""1374183""},
{""id"":""8"",""Code"":""1374193""},
{""id"":""9"",""Code"":""1374213""},
{""id"":""10"",""Code"":""1374223""},
{""id"":""11"",""Code"":""1374233""},
{""id"":""12"",""Code"":""1374243""},
{""id"":""13"",""Code"":""1374253""},
{""id"":""14"",""Code"":""1374263""},
{""id"":""15"",""Code"":""1374273""},
{""id"":""16"",""Code"":""1374283""},
{""id"":""17"",""Code"":""1374293""},
{""id"":""18"",""Code"":""1374313""},
{""id"":""19"",""Code"":""1374323""},
{""id"":""20"",""Code"":""1374333""},
{""id"":""21"",""Code"":""1374343""},
{""id"":""22"",""Code"":""1374353""},
{""id"":""23"",""Code"":""1374363""},
{""id"":""24"",""Code"":""1374373""},
{""id"":""25"",""Code"":""1374383""},
{""id"":""26"",""Code"":""1374393""},
{""id"":""27"",""Code"":""1374403""},
{""id"":""28"",""Code"":""1374413""},
{""id"":""29"",""Code"":""1374423""},
{""id"":""30"",""Code"":""1374433""},
{""id"":""31"",""Code"":""1374443""},
{""id"":""32"",""Code"":""1374453""},
{""id"":""33"",""Code"":""1374463""},
{""id"":""34"",""Code"":""1374473""},
{""id"":""35"",""Code"":""1374483""},
{""id"":""36"",""Code"":""1374493""}]";
return result;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式