求一个 右下角弹出框的例子
0
最佳答案
0
收获园豆：10
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: Thank you very much!
其他回答(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