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>
  • 相关阅读:
    zz 使用svn——项目的目录布局
    eclipse中字体太小
    SVN 项目的目录结构
    tuscany requires 学习
    搜索子集生成
    HZNUACM寒假集训Day12小结 数论入门
    HZNUACM寒假集训Day10小结 树树形DP
    模板 快速幂|取余
    HZNUACM寒假集训Day7小结 背包DP
    HZNUACM寒假集训Day6小结 线性DP
  • 原文地址：https://www.cnblogs.com/tangself/p/1995367.html
Copyright © 2011-2022 走看看