首页 新闻 会员 周边

.net中弹出窗口上点击按钮导致页面整体上移

0
悬赏园豆:20 [已关闭问题] 关闭于 2011-10-31 11:53

先随便新建一个页面,然后引用一个已经做好的弹出窗口的控件,在这个弹出窗口上点击按钮或是事件导致页面整体上移;

下面是弹出控件的代码,请各位麻烦看看呢!

前台控件页面

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopDialog.ascx.cs" Inherits="Surve_PaperMake_PopDialog" %>
<asp:HiddenField ID="CssField" runat="server" />
<asp:HiddenField ID="CloseBtnField" runat="server" />
<asp:HiddenField ID="TopRightField" runat="server" />
<script type="text/javascript">
    window.attachEvent("onload", function() {
        var css1 = document.getElementById('<%=CssField.ClientID %>').value;
        var ele = document.createElement("link");
        ele.href = css1;
        ele.type = "text/css";
        ele.rel = "stylesheet";
        document.body.insertBefore(ele);
    });
    //弹出窗口类
    function PopDialog() {
        this._body = null; //对话框的主体,不能为NULL
        this._tool = null; //对话框的下部工具条,一般存放按钮,可以为NULL
        this._titleStr = ""; //标题

        this._displayHandler = new Array();//显示时的事件委托
        this._closeHandler = new Array();//关闭时的事件委托
       
        this._width = "auto";

        this._dialog = document.createElement("div");
        this._closeBtn = document.createElement("img");
        this._closeBtn.className = "closeButton";
        this._closeBtn.src = document.getElementById("<%=CloseBtnField.ClientID %>").value;
        //this._closeBtn.src = document.getElementById("<%=TopRightField.ClientID %>").value;
        var temp = this;
        this._closeBtn.attachEvent("onclick", function() { temp.Close(); });

        //前景层遮罩
        this._dialogFrame = document.createElement("iframe");
       
        this._title = document.createElement("div");
        this._titleDiv = document.createElement("div");
        this._bodyDiv = document.createElement("div");
      
        //对话框定位
        this._x = 0;
        this._y = 0;
        this._dialog.style.left = 0;
        this._dialog.style.top = 0;
        this._fix = false; //是否固定位置


        this._moveSetting = new LgDrag(this._title, this._dialog);
        this._moveSettingFrame = new LgDrag(this._title, this._dialogFrame);
       
        this._canMove = false;//是否能拖动;此设置与_fix设置为互斥
       
       
        this._isMask = true;//是否需要屏蔽背景
       
       
        this._zIndex = 100;
        //背景层
        this._maskFrame = document.createElement("iframe");
        this._mask = document.createElement("div");
      
        //事件处理函数
    
        this._resizeEvent = function() { temp.Resize(); };
        this._scrollEvent = function() { temp.Scroll(); };

        document.body.appendChild(this._dialog);
        document.body.appendChild(this._dialogFrame);
        document.body.appendChild(this._maskFrame);
        document.body.appendChild(this._mask);


        this.InitBg();
        this.CreateTitle();

        this._dialog.style.display = "none";
        this._dialogFrame.style.display = "none";

        //处理_dialog被点击时,放到最前面

        this._dialog.attachEvent("onmousedown", function() {
            //document.body.appendChild(temp._dialog);
            //document.body.appendChild(temp._dialogFrame);
            temp.SetTopMost();
        });
    }

    PopDialog.prototype.SetTopMost = function() {
        var maxzIndex = 0;
        jQuery("[dialog]", "body").each(function() {
            if (maxzIndex < jQuery(this).css("zIndex")) {
                maxzIndex = jQuery(this).css("zIndex");
            }
        });

        if (maxzIndex > 0) {
            this._zIndex = maxzIndex + 1;
            this._dialogFrame.style.zIndex = this._zIndex + 1;
            this._dialog.style.zIndex = this._zIndex + 2;
        }
    }

    PopDialog.prototype.EnableCloseBtn = function(enable) {
      
        jQuery(this._closeBtn).remove();
        if (enable == true) {
            this._closeBtn.src = document.getElementById("<%=CloseBtnField.ClientID %>").value;
        }
        else {
            this._closeBtn.src = document.getElementById("<%=TopRightField.ClientID %>").value;
        }
        this._title.appendChild(this._closeBtn);

      
    }
  
    // 设置对话框主体的层
    PopDialog.prototype.SetBody = function(obj) {
        if (obj) {
            this._body = obj;
            this._body.style.display = "none";

            var bodyDiv2 = document.createElement("div");

            this._bodyDiv.className = "modalPopup_mid_content";
            this._bodyDiv.style.borderLeft = "solid 1px #246b9f";
            this._bodyDiv.style.borderRight = "solid 1px #246b9f";
            this._bodyDiv.style.padding = "0px";

            bodyDiv2.className = "modalPopup_mid_content_inner_noPadding";


            this._bodyDiv.appendChild(bodyDiv2);

            bodyDiv2.appendChild(this._body);

            this._dialog.appendChild(this._bodyDiv);
        }
    }
    //设置对话框底部的工具条
    PopDialog.prototype.SetTool = function(obj) {
        if (obj) {
            this._tool = obj;
            this._tool.style.display = "none";


            var bottomDiv1 = document.createElement("div");
            var bottomDiv2 = document.createElement("div");
            var bottomDiv3 = document.createElement("div");

            bottomDiv1.className = "child_frame_bottom_bg";
            bottomDiv1.style.width = "100%";

            bottomDiv2.className = "modalPopup_botLeft";
            bottomDiv3.className = "modalPopup_botRight";

            bottomDiv1.appendChild(bottomDiv2);
            bottomDiv1.appendChild(bottomDiv3);
            bottomDiv1.appendChild(this._tool);

            this._dialog.appendChild(bottomDiv1);
        }
    }
    //设置对话框标题文字
    PopDialog.prototype.SetTitle = function(titleStr) {
        this._titleStr = titleStr;
        this._titleDiv.innerHTML = this._titleStr;
    }
    //设置对话框长度
    PopDialog.prototype.SetWidth = function(width) {
        this._width = width;
    }
    //设置对话框层的高度
    PopDialog.prototype.SetZIndex = function(zIndex) {
        this._zIndex = zIndex;
    }
    //设置对话框是否固定位置
    PopDialog.prototype.SetFix = function(isFix) {
//        if (this._canMove == true) {
//            this._fix = false;
//        }
//        else {
            this._fix = false;
//        }
    }
    //设置是否需要屏蔽背景
    PopDialog.prototype.SetMask = function(isMask) {
        this._isMask = isMask;
    }
    //设置是否需要拖动
    PopDialog.prototype.SetMove = function(canMove) {
        this._canMove = canMove;
        if (this._canMove == true) {
            //this._title.style.cursor = "move";
            this._moveSetting.Start();
            this._moveSettingFrame.Start();
        }
        else {
            //this._title.style.cursor = "auto";
            this._moveSetting.Stop();
            this._moveSettingFrame.Stop();
        }
    }
   
    PopDialog.prototype.InitBg = function() {
        this._maskFrame.style.display = "none";
        this._maskFrame.style.position = "absolute";
        this._maskFrame.style.zIndex = this._zIndex;
        this._maskFrame.style.top = 0;
        this._maskFrame.style.left = 0;
        this._maskFrame.className = "modalBackground";
        this._maskFrame.frameborder = "0";
        this._maskFrame.src = "";
     

        this._mask.style.display = "none";
        this._mask.style.position = "absolute";
        this._mask.style.zIndex = this._zIndex + 1;
        this._mask.style.top = 0;
        this._mask.style.left = 0;
        this._mask.className = "modalBackground";


    }
    //重新初始化背景的高度,宽度;
    PopDialog.prototype.InitBGWH = function() {
        this._maskFrame.style.width = document.documentElement.clientWidth;
        this._maskFrame.style.height = document.documentElement.clientHeight;

        this._mask.style.width = document.documentElement.clientWidth;
        this._mask.style.height = document.documentElement.clientHeight;

        this._maskFrame.style.zIndex = this._zIndex;
        this._mask.style.zIndex = this._zIndex + 1;

    }
    PopDialog.prototype.CreateTitle = function() {
        //创建标题栏
        this._title.className = "child_frame_mid_bg";
        this._title.style.cursor = "auto";

        var titleDiv1 = document.createElement("div");


        titleDiv1.className = 'modalPopup_topLeft';
        this._titleDiv.className = "modalPopup_topText";
        this._titleDiv.style.width = "auto";
        this._titleDiv.style.textAlign = "left";


       
      

        this._title.appendChild(titleDiv1);
        this._title.appendChild(this._titleDiv);
        this._title.appendChild(this._closeBtn);
        this._dialog.appendChild(this._title);

    }
    //初始化样式
    PopDialog.prototype.Init = function() {

        this._dialog.className = "modalPopup_while_bg";
        this._dialog.dialog = 1;
        this._dialogFrame.dialog = 2;
        //this._dialog.style.width = this._width;


        // this._dialog.style.left = this._x;
        // this._dialog.style.top = this._y;

        this._dialogFrame.style.display = "none";
        this._dialogFrame.style.zIndex = this._zIndex + 2;
        this._dialogFrame.style.position = "absolute";
        this._dialogFrame.frameborder = "0";
        this._dialogFrame.src = "";

        this._dialog.style.zIndex = this._zIndex + 3;
        this._dialog.style.position = "absolute";
        this._dialog.style.display = "none";

        if (!this._tool) {
            this._bodyDiv.style.borderBottom = "solid 1px #246b9f";
        }

    }

    PopDialog.prototype.Close = function() {

        //执行关闭时的委托
        for (var i = 0; i < this._closeHandler.length; i++) {
            var handler = this._closeHandler[i];
            var method = handler["method"];
            var area = handler["area"];
            if (area == null) {
                method();
            }
            else {
                method.apply(area);
            }
        }

        this._dialog.style.display = "none";
        this._dialogFrame.style.display = "none";
        this._maskFrame.style.display = "none";
        this._mask.style.display = "none";
        //删除滚动以及变动大小的事件
        this.EventHandle(false);
    }

    PopDialog.prototype.Display = function() {
        this.InitBGWH();
        this.Init();

        //执行显示时的委托
        for (var i = 0; i < this._displayHandler.length; i++) {

            var handler = this._displayHandler[i];
            var method = handler["method"];
            var area = handler["area"];
            if (area == null) {
                method();
            }
            else {
                method.apply(area);
            }
            //handler();
        }

        if (this._isMask == true) {
            this._maskFrame.style.display = "block";
            this._mask.style.display = "block";
        } else {
            this._maskFrame.style.display = "none";
            this._mask.style.display = "none";
        }
        this._dialog.style.display = "block";
        this._dialogFrame.style.display = "block";
        if (this._body) {
            this._body.style.display = "";
        }
        if (this._tool) {
            this._tool.style.display = "";
        }
        if (this._width == "auto" && this._body) {
            var w = this._body.clientWidth;
            if (w) {
                this._dialog.style.width = w + 6;

            }

        }

        this._dialogFrame.style.width = this._dialog.clientWidth;
        this._dialogFrame.style.height = this._dialog.clientHeight;

        //启动滚动以及变动大小的事件
        this.EventHandle(true);

        this.MaskAllScreen();
        this.DialogPosition();
    }

    PopDialog.prototype.EventHandle = function(isEnable) {
      
        if (isEnable == true) {
            window.attachEvent("onresize", this._resizeEvent);
            window.attachEvent("onscroll", this._scrollEvent);
        }
        else {
            window.detachEvent("onresize", this._resizeEvent);
            window.detachEvent("onscroll", this._scrollEvent);
        }

    }

    PopDialog.prototype.Scroll = function() {
    this.MaskAllScreen();
    this.DialogPosition();
    }

    PopDialog.prototype.Resize = function(obj) {
        this.MaskAllScreen();
        this.DialogPosition();
    }

    PopDialog.prototype.MaskAllScreen=function()  {
        var w = document.documentElement.scrollWidth;
        var h = document.documentElement.scrollHeight;
       
        this._maskFrame.style.width = w;
        this._maskFrame.style.height = h;

        this._mask.style.width = w;
        this._mask.style.height = h;


    }

    PopDialog.prototype.DialogPosition = function() {

        var l = parseInt(this._dialog.style.left);
        var t = parseInt(this._dialog.style.top);

        var sl = 0;
        var st = 0;

        if (l == 0 && t == 0) {
            var dw = this._dialog.clientWidth;
            var dh = this._dialog.clientHeight;

            sl = document.documentElement.scrollLeft;
            st = document.documentElement.scrollTop;

            l = (document.documentElement.clientWidth - dw) / 2 + sl;
            t = (document.documentElement.clientHeight - dh) / 2 + st;

        }
        else {


            //            if (this._fix == true) {
            //                sl = document.documentElement.scrollLeft;
            //                st = document.documentElement.scrollTop;
            //            }
        }

        //alert(l + "&&" + sl);

        this._dialog.style.left = l;
        this._dialog.style.top = t;

        this._dialogFrame.style.left = l;
        this._dialogFrame.style.top = t;
    }

    PopDialog.prototype.AddDisplayListener = function(handler, area) {
        var obj = null;
        if (!area) {
            obj={"method":handler,"area":null};
        }
        else {
            obj={"method":handler,"area":area};
        }
        this._displayHandler.push(obj);

    }

    PopDialog.prototype.AddCloseListener = function(handler,area) {
        var obj = null;
        if (!area) {
            obj = { "method": handler, "area": null };
        }
        else {
            obj = { "method": handler, "area": area };
        }
        this._closeHandler.push(obj);

    }
   
   

</script>

<script type="text/javascript">
    function LgDrag(handler,moveObj) {
        this._dragHandler = handler;
        this._moveObj = moveObj;
       
        this._moveObj.style.position = "absolute";
        this._moveObj.style.top = 0;
        this._moveObj.style.left = 0;

        this._x = 0;
        this._y = 0;

        this._moving = false;
        this._oEvent = null;
        //事件处理
        var temp=this;
        this._mousemoveEvent = function() { temp.MouseMoveEvent(); };
        this._mousedownEvent = function() { temp.MouseDownEvent(); };
        this._mouseupEvent = function() { temp.MouseUpEvent(); }
    }
    //设置拖动时需要移动的对象
    LgDrag.prototype.SetMoveObjs = function(moveObjs) {

    }
   
    //启动拖动效果
    LgDrag.prototype.Start = function() {
    this._dragHandler.style.cursor = "move";
    this.DragEvent(true);
  
     }


//结束拖动效果
LgDrag.prototype.Stop = function() {
    this._dragHandler.style.cursor = "auto";
    this.DragEvent(false);
}

//事件处理函数
LgDrag.prototype.DragEvent = function(isStart) {
    if (isStart == true) {
        this._dragHandler.attachEvent("onmousemove", this._mousemoveEvent);
         document.body.attachEvent("onmousemove", this._mousemoveEvent);
        //document.attachEvent("onmousemove", this._mousemoveEvent);
        //window.attachEvent("onmove", this._mousemoveEvent);
        this._moveObj.attachEvent("onmousemove", this._mousemoveEvent);
        this._dragHandler.attachEvent("onmouseup", this._mouseupEvent);
        document.attachEvent("onmouseup", this._mouseupEvent);
        this._moveObj.attachEvent("onmouseup", this._mouseupEvent);


        this._dragHandler.attachEvent("onmousedown", this._mousedownEvent);

    }
    else {
        this._dragHandler.detachEvent("onmousemove", this._mousemoveEvent);
        document.body.detachEvent("onmousemove", this._mousemoveEvent);
        //document.detachEvent("onmousemove", this._mousemoveEvent);
        //window.detachEvent("onmove", this._mousemoveEvent);
        this._moveObj.detachEvent("onmousemove", this._mousemoveEvent);
        this._dragHandler.detachEvent("onmouseup", this._mouseupEvent);
        document.detachEvent("onmouseup", this._mouseupEvent);
        this._moveObj.detachEvent("onmouseup", this._mouseupEvent);


        this._dragHandler.detachEvent("onmousedown", this._mousedownEvent);
    }
}


LgDrag.prototype.MouseMoveEvent = function() {
    if (this._moving == true) {
        var oEvent = window.event;

        var x = oEvent.x;
        var y = oEvent.y;


        var spanX = x - this._x;
        var spanY = y - this._y;

        var moveToX = parseInt(this._moveObj.style.left) + spanX;
        var moveToY = parseInt(this._moveObj.style.top) + spanY;
        if (moveToX < 0)
            moveToX = 0;
        if (moveToY < 0)
            moveToY = 0;
        this._moveObj.style.top = moveToY;
        this._moveObj.style.left = moveToX;

        this._x = x;
        this._y = y;

        document.selection.clear();

        //document.getElementById("mouseDiv").innerText = temp._x + "&&" + temp._y;

    }
}

LgDrag.prototype.MouseDownEvent = function() {
    var oEvent = window.event;
    this._x = oEvent.x;
    this._y = oEvent.y;
    this._moving = true;

    document.body.setCapture();
}


LgDrag.prototype.MouseUpEvent = function() {
    if (this._moving == true) {
        document.selection.clear();
    }
    this._moving = false;
    document.body.releaseCapture();
  
}  

</script>

后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Surve_PaperMake_PopDialog : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string url = this.Page.ResolveClientUrl("~/JS/jquery-1.3.2.js");
            Page.ClientScript.RegisterClientScriptInclude("jQuery1.3.2", url);

            CssField.Value = Page.ResolveClientUrl("~/App_Theme/Skin1/zh-cn/CSS/Index/IndexContent.css");
            CloseBtnField.Value = Page.ResolveClientUrl("~/App_Theme/Skin1/zh-cn/Images/Index/close.gif");
            TopRightField.Value = Page.ResolveClientUrl("~/App_Theme/Skin1/zh-cn/Images/Index/modalPopup_topRight.JPG");

        }
    }
}

深山居士的主页 深山居士 | 初学一级 | 园豆:123
提问于:2011-08-02 16:43
< >
分享
所有回答(1)
0

弹出窗口的控件用ymPrompt  http://www.cnblogs.com/whz881027/articles/2120786.html

杯具程序员 | 园豆:1718 (小虾三级) | 2011-08-02 17:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册