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>  
  • 相关阅读:
    Thymeleaf标签使用
    mybatis映射和条件查询
    开发模型
    Sentinel降级服务
    Sentinel
    Nacos注册中心
    SpringCloudAlibaba简介
    Sleuth
    Stream消息驱动
    如何用JAVA爬取AJAX加载后的页面(利用phantomjs)【以天眼查为例】
  • 原文地址：https://www.cnblogs.com/loveAline/p/9005192.html
Copyright © 2011-2022 走看看