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>
  • 相关阅读:
    yii框架中关于控制器中filter过滤器和外部action的使用
    关于开启url的pathinfo模式
    关于java的上转型对象
    linux下svn用法
    inode和文件描述符区别
    mysql字段更改操作命令
    c语言中的const的作用及解析
    C语言结构体--位域
    enum枚举型
    C语言结构体
  • 原文地址：https://www.cnblogs.com/tangself/p/1995367.html
Copyright © 2011-2022 走看看