jquery写的弹出框

最新推荐文章于 2021-02-10 13:56:49 发布

z-pan

最新推荐文章于 2021-02-10 13:56:49 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lostyue/archive/2012/03/28/2422406.html

版权

  1 <html>
  2 <head>
  3     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4     <title>Rainbow-lostyue</title>
  5     <link rel="stylesheet" type="text/css" href="mydemo.css"/>
  6     <script language="javaScript" type="text/javascript" src="jquery.js"></script>
  7     <script language="javaScript" type="text/javascript" src="mydemo.js"></script>
  8     <script type="text/javascript">
  9         $(document).ready(function(){
 10             $("table tr a").css("display", "none");
 11 
 12             $("table tr a").click(function(event){
 13                 event.stopPropagation();
 14 var aoffset = $(event.target).offset();
 15 var aheight = $(event.target).height();
 16 
 17                 $("#popupmsg").css({top: aoffset.top + aheight + "px", left: aoffset.left + "px"});
 18                 $("#popupmsg #showlink").html($(this).html() + "para: " + aoffset.top + "px, " + aheight + "px");
 19                 $("#popupmsg").fadeTo("slow", 0.66);
 20             });
 21 
 22             $("table tr a").mouseout(function(event){
 23                 event.stopPropagation();
 24                 $("#popupmsg").fadeOut("slow");
 25             });
 26 
 27             $("table tr a").each(function(index){
 28 //$($("table tr a")[index]).css("display", "none");
 29 /*$($("table tr a")[index]).mouseover(function(){
 30                     $($("table tr a")[index]).css("display", "inline");
 31                 });
 32 
 33                 $($("table tr a")[index]).mouseout(function(){
 34                     $($("table tr a")[index]).css("display", "none");
 35                 });*/
 36 
 37                 $("table tr").each(function(){
 38 //var eachtr = $($("table tr")[index]);
 39 //alert($(eachtr a).innerHTML);
 40                         $(this).mouseover(function(){
 41                             $(this).find('a').css("display", "inline");
 42                         });
 43 
 44                         $(this).mouseout(function(){
 45                             $(this).find('a').css("display", "none");
 46                         });
 47                     }
 48                 );
 49             });
 50 
 51             $("#loginform1 > input").addClass("inputstyle");
 52             $("#popupmsg").hide();
 53         });
 54 
 55 function test_everything(){
 56 /*var trs = $("table tr");
 57             trs.each(
 58                 function(){
 59                     //var eachtr = trs[i];
 60                     //alert($(this).find('a'));
 61                     $(this).find('a').addClass("tdstyle");
 62                 }
 63             );*/
 64             alert($("#popupmsg #showlink").html());
 65         }
 66 </script>
 67 </head>
 68 <body>
 69 <h2><a href="relogin">Relogin</a></h2>
 70 <form name="loginform" id="loginform1" action="login" method="post">
 71     <input type="text" id="inputname">
 72     <input type="text" name="inputage" id="inputage">
 73     <input type="button" value="test" onclick="test_everything();">
 74 </form>
 75 <a href="javascript:void document.loginform.submit();">new window</a><br>
 76 <a href="window.open();" onmouseover="status='Go to Site Map'; return true;">new window</a><br>
 77 <a href="#" onclick="window.open();">new window</a>
 78 <table id="mytable">
 79     <tr>
 80         <td>test1</td>
 81         <td><a href="#">link34</a></td>
 82         <td><a href="#">link5666</a></td>
 83     </tr>
 84     <tr>
 85         <td>test2</td><td><a href="#">link2</a></td><td><a href="#">link</a></td>
 86     </tr>
 87     <tr>
 88         <td>test3</td><td><a href="#">link3</a></td><td><a href="#">link</a></td>
 89     </tr>
 90 </table>
 91 
 92 <table id="mytable">
 93     <tr>
 94         <td>test4</td><td><a href="#">link4</a></td><td><a href="#">link</a></td>
 95     </tr>
 96     <tr>
 97         <td>test5</td><td><a href="#">link5</a></td><td><a href="#">link</a></td>
 98     </tr>
 99     <tr>
100         <td>test6</td><td><a href="#">link6</a></td><td><a href="#">link</a></td>
101     </tr>
102 </table>
103 <div id="popupmsg">
104     <span>display msg: <span id="showlink">111</span> </span>
105 </div>
106 </body>
107 </html>

 1 .tdstyle {
 2     background-color: green;
 3     backgound: green;
 4 }
 5 
 6 .inputstyle {
 7     border: 1px dotted black;
 8 }
 9 
10 td{
11     width: 100px;
12 }
13 
14 #popupmsg {
15     width: 150px;
16     height: 100px;
17     background-color:#FFCC66;
18     position: absolute;
19 }

转载于:https://www.cnblogs.com/lostyue/archive/2012/03/28/2422406.html

z-pan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery写的弹出框

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Rainbow-lostyue</title> 5 <link rel="stylesheet" t...
复制链接

扫一扫