弹出层 - 走看看

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>

查看全文

相关阅读:
vue-cli 2.x升级到3.x版本, 和3.x降级到2.x版本命令
 vue-cli 2.x项目，删除打包线上环境的控制台打印
 vue-cli 2.x项目使用cross-env新建多个打包环境
 解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题
 vue打包后，解决出现不到字体文件的错误
 js 网络图片转base64的方式(两种)
vscode编译器，Settings Sync 同步插件，忘记GitHub token 和 Gist的解决办法
 输入两个时间,计算他们相差多少天多少时,多少秒
 老生常谈之js深拷贝与浅拷贝
 React Hooks 你不来了解下？

原文地址：https://www.cnblogs.com/tangself/p/1995367.html

Copyright © 2011-2022 走看看