zoukankan      html  css  js  c++  java

  • jquery弹出框

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <title>jQuery - Start Animation</title>  
    5.   
    6.     <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js" ></script>  
    7.   
    8.     <script type="text/javascript">  
    9.         $(document).ready(function()  
    10.         {  
    11.             //动画速度  
    12.             var speed = 500;  
    13.   
    14.             //绑定事件处理  
    15.             $("#btnShow").click(function(event)  
    16.             {  
    17.                 //取消事件冒泡  
    18.                 event.stopPropagation();  
    19.                 //设置弹出层位置  
    20.                 var offset = $(event.target).offset();  
    21.                 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });  
    22.                 //动画显示  
    23.                 $("#divPop").show(speed);  
    24.   
    25.             });  
    26.             //单击空白区域隐藏弹出层  
    27.             $(document).click(function(event) { $("#divPop").hide(speed) });  
    28.             //单击弹出层则自身隐藏  
    29.             $("#divPop").click(function(event) { $("#divPop").hide(speed) });  
    30.         });  
    31.     </script>  
    32.   
    33. </head>  
    34. <body>  
    35.     <div>  
    36.         <br /><br /><br />  
    37.         <button id="btnShow">显示提示文字</button>  
    38.     </div>  
    39.           
    40.     <!-- 弹出层 -->  
    41.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;  
    42.          300px; height: 100px;">  
    43.         <div style="text-align: center;" >弹出层</div>  
    44.     </div>  
    45. </body>  
    46. </html>  
  • 相关阅读:
    jquery选择器
    js中的闭包技术
    idea创建servlet不能创建：
    JSP页面不解析EL表达式的原因
    大对象数据LoB的应用
    缓冲流、转换流、序列化流相关流知识点
    jdk5.0新特性（注解）
    EKT相关知识（Class类对象的方法补充）
    java中调用存储过程或函数
    Java 缓冲流
  • 原文地址：https://www.cnblogs.com/loveAline/p/9005192.html
Copyright © 2011-2022 走看看