常熟人家blog头像

弹窗登录框代码

时间:13-12-02 栏目:idea 楼主:鲁智深 评论:0 点击: 2,314 次

登录框涉及到的代码非常多,如果是自己编写的话,我估计不是专业的程序员,想做登录框效果那是非常困难的。这也是很多seo人的最大的弊端,下面就来分享如何制作《360弹窗登录框》,代码如下。

360弹窗登录框

360弹窗登录框

弹窗登录框代码几个注意点:

CSS样式

display:none;(隐藏框架)

引入jquery类库

下载:百度网盘

调用代码

1
<script type="text/javascript" src="js/jquery.js"></script>

引入Arry老师自定义的弹出框js文件

关键js代码(判断弹出框阴影、弹出框位置)

调用代码

1
<script type="text/javascript" src="js/show.js"></script>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    function showid(idname){
        var isIE = (document.all) ? true : false;
        var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
        var newbox = document.getElementById(idname);
        newbox.style.zIndex = "9999999";
        newbox.style.display = "block"
        newbox.style.position = !isIE6 ? "fixed" : "absolute";
        newbox.style.top = newbox.style.left = "50%";
        newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
        newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
        var layer = document.createElement("div");
        layer.id = "layer";
        layer.style.width = layer.style.height = "100%";
        layer.style.position = !isIE6 ? "fixed" : "absolute";
        layer.style.top = layer.style.left = 0;
        layer.style.backgroundColor = "#888";
        layer.style.zIndex = "9999998";
        layer.style.opacity = "0.6";
        document.body.appendChild(layer);
   
        function layer_iestyle(){
            layer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) +
            "px";
            layer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
            "px";
        }
        function newbox_iestyle(){
            newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
            newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
        }
        if (isIE) {
            layer.style.filter = "alpha(opacity=60)";
        }
        if (isIE6) {
            layer_iestyle()
            newbox_iestyle();
            window.attachEvent("onscroll", function(){
                newbox_iestyle();
            })
            window.attachEvent("onresize", layer_iestyle)
        }
    }

登录、关闭按钮

关闭代码:

1
<a href="#" title="关闭" onclick="$('#myadv').hide();$('div#layer').remove();"></a>

登录代码:

1
<a href="#" onclick="showid('myadv');">登录</a>

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--document type -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <!--声明当前页面的编码集charset: GBK(GB2312)中文编码,UTF-8(国际编码) -->
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <!--这是当前页面的三要素-->
        <title>html零基础快速制作网页弹出窗口 - Arry老师</title>
        <meta name="Keywords" content="html,弹出窗口">
        <meta name="description" content="">
       
        <!--css,js-->
        <style type="text/css">
            /*以#开头的颜色值 称之为 十六进制码 ,另一种是英文单词*/
            .adv{width:460px;height:310px;border:1px solid #D8D8D8;display:none;}
            /*background:url('图片地址') no-repeat;*/
            .adv_top{width:460px;height:56px;background:url('images/1.gif');}
            .adv_hd{width:460px;height:56px;line-height:56px;padding-top:15px;padding-right:5px;}
            .adv_hd a{font-size:12px;color:#000000;background:url('images/2.gif') no-repeat;width:29px;height:24px;float:right;}
            .adv_hd a:hover{width:29px;height:24px;background:url('images/3.gif') no-repeat;}
           
        </style>


    </head>
<body>

    <a href="#" onclick="showid('myadv');">登录</a>  
   
    <!--class=""类样式 -->
    <div class="adv" id="myadv">
        <div class="adv_top">
            <div class="adv_hd">
                <a href="#" title="关闭" onclick="$('#myadv').hide();$('div#layer').remove();"></a>
            </div>
        </div>
       
        <div>
            <!--src路径,alt描述,height高度,width宽度-->
            <img src="images/4.jpg" alt="登陆" height="254" width="460"/>
        </div>

    </div>


<!--引入jquery 类库 js = javascript-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--引入Arry老师自定义的弹出框js文件-->
<script type="text/javascript" src="js/show.js"></script>

</body>
</html>

效果可以参照360搜索引擎登录框

收藏本页

    声明:  如有关于wordpress代码问题请留言即可...!

发表评论

------====== 本页公告 ======------
   建站程序也叫开源程序,建站程序都是免费的,现在国内比较流行的建站程序有个人博客(wordpress,zblog),门户(dedecms),商城(shopex),论坛(discuz!)本博就是用wordpress作为基础搭建起来的网站。