<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>test</title>
    <script type="text/javascript" src="jquery/jquery-1.2.6.js" ></script>
    <style type="text/css">
        .pop-box {  
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/ 
            margin-bottom: 3px;  
            display: none;  
            position: absolute;  
            background: #FFF;  
            border:solid 1px #6e8bde;  
        }  
         
        .pop-box h4 {  
            color: #FFF;  
            cursor:default;  
            height: 18px;  
            font-size: 14px;  
            font-weight:bold;  
            text-align: left;  
            padding-left: 8px;  
            padding-top: 4px;  
            padding-bottom: 2px;  
            background: url("../images/header_bg.gif") repeat-x 0 0;  
        }  
         
        .pop-box-body {  
            clear: both;  
            margin: 4px;  
            padding: 2px;  
        }
       
       
        .mask {  
            color:#C7EDCC;
            background-color:#C7EDCC;
            position:absolute;
            top:0px;
            left:0px;
            filter: Alpha(Opacity=60);
        }
    </style>
   <script language=javascript type="text/javascript">
    function popupDiv(div_id) {  
        var div_obj = $("#"+div_id); 
        var windowWidth = document.body.clientWidth;      
        var windowHeight = document.body.clientHeight; 
        var popupHeight = div_obj.height();      
        var popupWidth = div_obj.width();   
        //添加并显示遮罩层  
        $("<div id='mask'></div>").addClass("mask")  
                                  .width(windowWidth + document.body.scrollWidth)  
                                  .height(windowHeight + document.body.scrollHeight)  
                                  .click(function() {hideDiv(div_id); })  
                                  .appendTo("body")  
                                  .fadeIn(200);  
        div_obj.css({"position": "absolute"})  
               .animate({left: windowWidth/2-popupWidth/2,   
                         top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");  
                       
    }  
     
    function hideDiv(div_id) {  
        $("#mask").remove();  
        $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");  
    } 
   </script>
   
</head>
<body>
    <form id="form1" runat="server">
        <div id='pop-div' style="width: 300px;" class="pop-box"> 
            <h4>标题位置</h4> 
            <div class="pop-box-body" > 
                <p> 
                    正文内容  
                </p> 
                <input id=btnClose type=button onclick="hideDiv('pop-div');" value="关闭"/>
            </div> 
        </div>
    <input type=button id=btnTest  value='test' onclick="popupDiv('pop-div');"/>
    </form>
  
</body>
</html>

转载于:https://www.cnblogs.com/Dot-Boy/archive/2009/07/06/1517747.html

# javascript # xhtml
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区