关于定位弹出层的JS问题

一个非常简单但能说明原理的示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#openDiv {
position:absolute;
width:250px;
height:200px;
border:3px solid blue;
background:#eee;
display:none;
}
</style>
<script>
function openDiv(XelementId)
{
var div=document.getElementById(XelementId);
div.style.display="block"; div.style.left=
(document.documentElement.clientWidth-
div.clientWidth)/2+document.documentElement.scrollLeft+document.body.scr
ollLeft+"px";
div.style.top=(document.documentElement.clientHeight-
div.clientHeight)/2+document.documentElement.scrollLeft+document.body.sc
rollLeft+"px";
}
</script>
</head>
<body>

    function showFloatDiv() {
        //ie适用,取得页面滑轮垂直移动距离
        var offset = document.documentElement.scrollTop;
        //设置弹出效果
        $("#YouFloatDiv").animate({
            //这里的-200是窗口正中向左偏移量,可以用浮动层的半宽来替代
            left: ($("body").width()/2-200)+"px",
            //这里的+300是窗口顶部向下偏移量
            top: (offset + 300) + "px",
            opacity: 'toggle'
            }, 300 );
        //显示弹出层
        $("#YouFloatDiv").show();
        return false;
    }

给你段我做的弹出层的JS，带渐隐，鼠标放上去又恢复，移开渐隐，还可以指定到某个控件后面弹出
        //弹出层
        function ShowMessageTip(objId, conId,txtObj,MessageContent)
        {
        //写一个内容层
            document.write("<div id=" + conId + " style=\"display: none\">");
            document.write("<div onmouseover=\"document.getElementById('dv_ErrorInfo_View').mouseover=true\" onmouseout=\"document.getElementById('dv_ErrorInfo_View').mouseover=false\" style=\"width: 200px; height: 100px;\">");
            document.write("<div>");
            document.write("<div onmousedown=\"StartDrag(this)\" onmouseup=\"StopDrag(this)\" onmousemove=\"Drag(this)\" style=\"float:left; width:90%;background-color:#b0c4de;\">");
            document.write("<strong style=\"color: black;\">验证信息</strong>");
            document.write("</div>");
            document.write("<div onclick=\"closeLayer()\" style=\"float:right; width:10%;\"><img alt=\"关闭\" src=\"../Image/stop.jpg\" width=\"16px\" height=\"16px\" /></div>");
            document.write("</div>");
            document.write("<div style=\"padding: 8px\">");
            document.write("<table width=\"100%\">");
            document.write("<tr>");
            document.write("<td align=\"left\" rowspan=\"2\">");
            document.write("<img alt=\"提示信息\" src=\"../Image/warning.jpg\" />");
            document.write("</td>");
            document.write("<td align=\"left\">");
            document.write("</td>");
            document.write("</tr>");
            document.write("<tr>");
            document.write("<td align=\"left\">");
            document.write(MessageContent);
            document.write("</td>");
            document.write("</tr>");
            document.write("</table>");
            document.write("</div>");
            document.write("</div>");
            document.write("</div>");

            var arrayPageSize = getPageSize(); //调用getPageSize()函数
            var arrayPageScroll = getPageScroll(); //调用getPageScroll()函数
            if (!document.getElementById("dv_ErrorInfo_View")) {
                //创建弹出内容层
                var popupDiv = document.createElement("div");
                //给这个元素设置属性与样式
                popupDiv.setAttribute("id", "dv_ErrorInfo_View")
                popupDiv.style.position = "absolute";
                popupDiv.style.border = "1px solid #ccc";
                popupDiv.style.background = "#e6e6fa";
                popupDiv.style.zIndex = 99;//                //创建弹出背景层
//                var bodyBack = document.createElement("div");
//                bodyBack.setAttribute("id", "bodybg")
//                bodyBack.style.position = "absolute";
//                bodyBack.style.width = "100%";
//                bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
//                bodyBack.style.zIndex = 98;
//                bodyBack.style.top = 0;
//                bodyBack.style.left = 0;
//                bodyBack.style.filter = "alpha(opacity=50)";
//                bodyBack.style.opacity = 0.5;
//                bodyBack.style.background = "#ddf";
                //实现弹出(插入到目标元素之后)
                var mybody = document.getElementById(txtObj);
                mybody.focus();  //在此指点控件获取焦点
                insertAfter(popupDiv, mybody); //执行函数insertAfter()
                //insertAfter(bodyBack, mybody); //执行函数insertAfter()
            }
            //显示背景层
            //document.getElementById("bodybg").style.display = "";
            //显示内容层
            var popObj = document.getElementById("dv_ErrorInfo_View");
            popObj.innerHTML = document.getElementById(conId).innerHTML;
            popObj.style.display = "";
            //让弹出层在页面中垂直左右居中(统一)
            //popObj.style.width = "500px";
            //popObj.style.height = "200px";
            //popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
            //popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px';
            //让弹出层在页面中垂直左右居中(个性)
            //var arrayConSize=getConSize(conId)
            //popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2-50 + 'px';
            //popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 -30 + 'px';


            showMsg('dv_ErrorInfo_View');  //渐隐效果
        }
        //获取内容层内容原始尺寸
        function getConSize(conId) {
            var conObj = document.getElementById(conId)
            conObj.style.position = "absolute";
            conObj.style.left = -1000 + "px";
            conObj.style.display = "";
            var arrayConSize = [conObj.offsetWidth, conObj.offsetHeight]
            conObj.style.display = "none";
            return arrayConSize;
        }
        function insertAfter(newElement, targetElement) {//插入
            var parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
                parent.appendChild(newElement);
            }
            else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }

        //获取滚动条的高度
        function getPageScroll() {
            var yScroll;
            if (self.pageYOffset) {
                yScroll = self.pageYOffset;
            } else if (document.documentElement && document.documentElement.scrollTop) {
                yScroll = document.documentElement.scrollTop;
            } else if (document.body) {
                yScroll = document.body.scrollTop;
            }
            arrayPageScroll = new Array('', yScroll)
            return arrayPageScroll;
        }
        //获取页面实际大小
        function getPageSize() {
            var xScroll, yScroll;
            if (window.innerHeight && window.scrollMaxY) {
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) {
                sScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else {
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }
            var windowWidth, windowHeight;
            //var pageHeight,pageWidth;
            if (self.innerHeight) {
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) {
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) {
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
            var pageWidth, pageHeight
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }
            if (xScroll < windowWidth) {
                pageWidth = windowWidth;
            } else {
                pageWidth = xScroll;
            }
            arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
            return arrayPageSize;
        }
        //关闭弹出层
        function closeLayer() {
            document.getElementById("dv_ErrorInfo_View").style.display = "none";
            //document.getElementById("bodybg").style.display = "none";
            return false;
        }
///--------------------------- Move  Begin -------------------------
        var move = false, oldcolor, _X, _Y;
        function StartDrag(obj) {  //定义准备拖拽的函数
            obj.setCapture(); //对当前对象的鼠标动作进行跟踪
            oldcolor = obj.style.backgroundColor;
            obj.style.background = "#999";
            move = true;
            //获取鼠标相对内容层坐标
            var parentwin = document.getElementById("dv_ErrorInfo_View");
            _X = parentwin.offsetLeft - event.clientX
            _Y = parentwin.offsetTop - event.clientY
        }
        function Drag(obj) {        //定义拖拽函数
            if (move) {
                var parentwin = document.getElementById("dv_ErrorInfo_View");
                parentwin.style.left = event.clientX + _X;
                parentwin.style.top = event.clientY + _Y;
            }
        }
        function StopDrag(obj) {   //定义停止拖拽函数
            obj.style.background = oldcolor;
            obj.releaseCapture(); //停止对当前对象的鼠标跟踪
            move = false;
        }
//--------------------Move end----------------------------------
//-------------渐隐 begin-------------------------//设置透明度
function setOpacity(obj, value){
    if(document.all){
        if(value == 100){
            obj.style.filter = "";
        }else{
            obj.style.filter = "alpha(opacity=" + value + ")";
        }
    }else{
        obj.style.opacity =value / 100 ;

    }
}
//用setTimeout循环减少透明度
function changeOpacity(obj, startValue, endValue, step, speed){
    if(step >= 0 && startValue <= endValue || step <= 0 && startValue >= endValue){
        //document.body.removeChild(obj);
        obj.style.display = "none";
        return;
    }
    if(!obj)
    {
        return;
    }
    if(startValue<=0)
    {
        //document.body.removeChild(obj);
        obj.style.display = "none";
        return;
    }
    if(obj.mouseover)
    {
        startValue=100;
        endValue = 0;
    }
    setOpacity(obj, startValue);
    setTimeout(function(){changeOpacity(obj, startValue-step, endValue, step, speed);}, speed);
}
//设置隐藏速度和id
function showMsg(id){
    var msg =document.getElementById(id);
    var step = 3, speed = 100;
    if(msg.style.display=="none")
    {
    msg.style.display="";
    }    changeOpacity(msg, 100, 0, step, speed);
}//当鼠标覆盖后value=100
//function set//-------------渐隐end-----------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string name = FileUpload1.FileName;//上传文件名字
        string size = FileUpload1.PostedFile.ContentLength.ToString();
        string type = FileUpload1.PostedFile.ContentType;
        string type2 = name.Substring(name.LastIndexOf(".") + 1);
        string ipath = Server.MapPath("upimg") + "\\" + name;
        string fpath = Server.MapPath("upfile") + "\\" + name;
        string path="F:\\aaa\\"+FileUpload1.FileName;
        string wpath = "upimg\\" + name;
        if (type2 == "jpg" || type2 == "gif" || type2 == "bmp" || type2 == "png")
        {
            FileUpload1.SaveAs("F:\\aaa\\"+FileUpload1.FileName);
           // Image1.ImageUrl="F:\\aaa\\"+FileUpload1.FileName;
            Label1.Text = "你传图片的名字是" + name + "<br>文件大小为" + size + "<br>文件类型为" + type2 + "<br>文件路径为" + ipath;
        }

        SqlConnection cn = new SqlConnection("server=.;database=Northwind;uid=sa;pwd=sa");
        SqlCommand cmd = new SqlCommand("insert into Image(imageName,imagepath) values('" + name + "','" + path + "')", cn);
        cn.Open();
        cmd.ExecuteNonQuery();
        cn.Close();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {    SqlConnection cn = new SqlConnection("server=.;database=Northwind;uid=sa;pwd=sa");
    SqlCommand cmd = new SqlCommand("select imageName from Image where imageID='" + Convert.ToInt32(TextBox1.Text) + "'", cn);
    cn.Open();
    string a = cmd.ExecuteScalar().ToString();
    cn.Close();
    Image1.ImageUrl = "F:\\aaa\\" + a;
     }
}
保存看效果

调试易

关于定位弹出层的JS问题

解决方案 »