首页新闻找找看学习计划

求一个 右下角弹出框的例子

0
悬赏园豆:10 [已解决问题] 解决于 2012-05-15 12:51

  最近老大让我做一个右下角弹窗口的例子,找了半天都不如意,哪位大侠帮忙给弄一个?谢谢!

孤独青鸟的主页 孤独青鸟 | 初学一级 | 园豆:150
提问于:2012-05-14 09:44
< >
分享
最佳答案
0

http://www.kudystudio.com/jbox/jbox-demo.html

 

去看看,里面有你想要的

收获园豆:10
xu_happy_you | 菜鸟二级 |园豆:222 | 2012-05-14 11:00
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
 7     <style type="text/css">
 8     body{margin:0 auto;font-family:Verdana;font-size:12px;}
 9     #layer{width:500px;height:350px;border:solid 1px #ccc;position:absolute;z-index:200;display:none;}
10     #layer .heard{width:500px; height:29px;background-image:url(js/top_bg.gif); border-bottom:solid 1px #ccc;}
11     #layer .heard .left{float:left;line-height:29px;margin-right:2px;padding-left:10px; color:#5aa608;}
12     #layer .heard .right{float:right;line-height:29px;margin-right:2px;}
13     #layer .heard .right a{color:#999;text-decoration:none;}
14     #layer .heard .right a:hover{color:red;text-decoration:underline;}
15     #layer .iframe{width:100%;}
16     #layer .iframe iframe{width:500px; height:320px;}
17     </style>
18 </head>
19 <body>
20 <div style="height:1200px;" id="all">
21   <div id="layer">
22     <div class="heard"><div class="left">在此留言</div><div class="right"><a href="javascript:void(0)" id="layer_close" title="关闭">关闭</a></div></div>
23     <div class="iframe"><iframe src="http://www.baidu.com" scrolling="no" frameborder="0"></iframe></div>
24   </div>
25 </div>
26 </body>
27 </html>
28 <script type="text/javascript">
29     $(function() {
30         var screenwidth, screenheight, mytop;
31         screenwidth = $(window).width();
32         screenheight = $(window).height();
33         //获取滚动条距顶部的偏移
34         mytop = $(document).scrollTop();
35         //css定位弹出层
36         $("#layer").css({ "left": screenwidth - 502, "top": screenheight - 352 + mytop });
37         //当浏览器窗口大小改变时
38         $(window).resize(function() {
39             screenwidth = $(window).width();
40             screenheight = $(window).height();
41             mytop = $(document).scrollTop();
42             $("#layer").css({ "left": screenwidth - 502, "top": screenheight - 352 + mytop });
43         });
44         //当拉动滚动条时,弹出层跟着移动
45         $(window).scroll(function() {
46             screenwidth = $(window).width();
47             screenheight = $(window).height();
48             mytop = $(document).scrollTop();
49             $("#layer").css({ "left": screenwidth - 502, "top": screenheight - 352 + mytop });
50         });
51         //点击关闭按钮
52         $("#layer_close").click(function() {
53             $("#layer").fadeOut("slow");
54             return false;
55         });
56     });
57     $(function() { $("#layer").fadeIn("slow"); return false; });
58 </script>

把自己原来写的贴过来了,自己可以试试看

xu_happy_you | 园豆:222 (菜鸟二级) | 2012-05-14 11:29

@xu_happy_you: Thank you very much!

孤独青鸟 | 园豆:150 (初学一级) | 2012-05-15 11:15
其他回答(1)
0

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #msg_win{
            position:absolute;
            bottom:0px;
            right:0px;
            width:300px;
            height:300px;
            background:#EEE;
            border:1px solid #CCC;
            padding:10px;
            display:none;
        }
        .closeX{
            margin:-10px;
            float:right;
            width:20px;
            background:#FF6600;
            cursor:pointer;
            text-align:center;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var ShowMessage = {
            box:null,
            init: function (id) {
                box= $("#"+id);
                this.creatBox();
                $("div.closeX").bind("click",function () {
                box.hide(500);
                });
            },
            creatBox: function () {
                box.show(1000);
            }
        };
        window.onload = function () {
            ShowMessage .init("msg_win");
        }
    </script>
</head>
<body>
    test
    <div id="msg_win">
    <div title="关闭" class="closeX">X</div>
    <div class="content">abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC </div>
    </div>
</body>
</html>

在线示例:http://jscode.chinacxy.com/code/9f9bff92429c7501c62b897e22df62ad.aspx

artwl | 园豆:16526 (专家六级) | 2012-05-14 10:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册