不需要 jq 的关机效果

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Pages_Module_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        //不需要jq
        function modalDiv() {
            this.hiddenDiv = null;
            this.init();
        }
        modalDiv.prototype = {
            init: function() {
                if (typeof (this.hiddenDiv) == undefined || this.hiddenDiv == null) {
                    this.hiddenDiv = document.createElement("div");
                    this.hiddenDiv.id = "aqiooJshHiddenDiv";
                    var OsObject = "";
                    if (navigator.userAgent.indexOf("MSIE") > 0) {
                        this.hiddenDiv.style.cssText='filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;width: 100%; height: 100%; text-align: center; background-color: #000; z-index: 1000;position: absolute; overflow: hidden;display:none';
                    }
                    else {
                        this.hiddenDiv.setAttribute('style', 'filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;width: 100%; height: 100%; text-align: center; background-color: #000; z-index: 1000;position: absolute; overflow: hidden;display:none');
                    }
                    document.body.appendChild(this.hiddenDiv);
                }
            },
            getPos: function(ele) {
                var width = ele.offsetWidth;
                var height = ele.offsetHeight;
                var left = ele.offsetLeft;
                var top = ele.offsetTop;
                while (ele = ele.offsetParent) {
                    left += ele.offsetLeft;
                    top += ele.offsetTop;
                }
                return [left, top, height, width];

            },
            showHidden: function(contentId) {
                var ele = document.getElementById(contentId);
                if (ele) {
                    var pos = this.getPos(ele);
                    this.hiddenDiv.style["left"] = pos[0] + 'px';
                    this.hiddenDiv.style["top"] = pos[1] + 'px';
                    this.hiddenDiv.style["height"] = pos[2] + 'px';
                    this.hiddenDiv.style["width"] = pos[3] + 'px';
                    this.hiddenDiv.style["display"] = "";
                }
            }
        }
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="mydiv" style="width: 800px; height: 600px; border: solid 1px red; margin: 100px auto;">
        ddddddddd
    </div>
    <input id="Button1" type="button" value="移动" onclick="showHiden();" />

    <script type="text/javascript">
        function showHiden() {
            if (typeof (myhiddendiv) != undefined) {
                myhiddendiv = new modalDiv();
                myhiddendiv.showHidden("mydiv");
            }
        }
    </script>

    </form>
</body>
</html>

 

你可能感兴趣的:(效果)