先随便新建一个页面,然后引用一个已经做好的弹出窗口的控件,在这个弹出窗口上点击按钮或是事件导致页面整体上移;
下面是弹出控件的代码,请各位麻烦看看呢!
前台控件页面
<%@ 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");
}
}
}