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>
  • 相关阅读:
    广域网详解
    无线AP和无线路由器区别
    TRUNK的作用功能.什么是TRUNK
    name after, name for, name as
    让你的情商爆棚吧！
    综合布线系统之7个子系统构成
    网桥和交换机的工作原理及区别
    边界网关协议BGP
    OSPF协议详解
    路由信息协议（RIP）的防环机制
  • 原文地址：https://www.cnblogs.com/tangself/p/1995367.html
Copyright © 2011-2022 走看看