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>
  • 相关阅读:
    9.16第一次上课关于HTML的小结
    9.22课堂记录
    9.19课堂记录
    html文档基本结构
    HTMl学习1
    HTML第一次学习笔记
    CSS3和CSS2.1的区别
    HTML5新元素
    第一课：HTML
    块级元素和行内元素
  • 原文地址：https://www.cnblogs.com/tangself/p/1995367.html
Copyright © 2011-2022 走看看