zoukankan      html  css  js  c++  java

  • 弹出层

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>弹出层</title>
        <script type ="text/javascript" src ="jquery-1.4.2.min.js" ></script>
        <script type ="text/javascript" >
        $(document).ready(function()
        {
         //动画速度
         var speed=500;
         //绑定事件处理
         $("#btnShow").click(function(event)
         {
         //取消事件冒泡
         event.stopPropagation();
         //设置弹出层的位置
         var offset=$(event.target).offset();
         $("#divTop").css({top:offset.top+$(event.target).height()+"px",left:offset.left});
         $("#divTop").show(speed);
        
         })
        
         //单击空白区域隐藏层
         $(document).click(function(event)
         {
          $("#divTop").hide(speed);
         }
         )
         //单击层隐藏自身
         $("#divTop").click(function(event)
         {
          $("#divTop").hide(speed);
         })
       
        }
       
        )
       
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <br /><br /><br />
        <button id ="btnShow">显示提示文字</button>
        </div>
       
        <div id ="divTop" style ="background-color:#f0f0f0; border : solid 1px #000000; position :absolute ; display :none ; width :300px ; height :100px">
         <div style =" text-align:center "> 弹出层</div>
        </div>
        </form>
    </body>
    </html>
  • 相关阅读:
    python的多线程问题
    python 调用函数时使用星号 *, **
    python正则中的贪婪与非贪婪
    python中文处理
    Python 模块之 ConfigParser: 用 Python 解析配置文件
    substr使用注意
    [转]互联网后台服务的协议设计
    Java设计模式从精通到入门四 工厂方法模式
    logback中logger详解
    logback实践笔记
  • 原文地址：https://www.cnblogs.com/tangself/p/1995367.html
Copyright © 2011-2022 走看看