JavaScript写的一个DIV 弹出网页对话框

网上搜索到的代码,做了一些修改该,
修正无法自定义颜色,修正IE8 下错误,以及其他小BUG 兼容IE6~8以及火狐
可以自定义
// 提示窗口标题高度
// 提示窗口的边框颜色
// 提示窗口的标题颜色
// 提示窗口的标题背景色
// 提示内容的背景色
// 提示内容文字对齐方式
功能 可以弹出一个大DIV遮住页面(IE下 透明) 然后在屏幕中央显示显示一个小DIV
可用作功能提示 操作提示 以及公告等
提示内容可以使带HTML标记的文字,也可是一个页面链接


代码如下:

function MessageBox()
{
this.titleheight = "21"; // 提示窗口标题高度
this.bordercolor = "#666699"; // 提示窗口的边框颜色
this.titlecolor = "#1259a4"; // 提示窗口的标题颜色
this.titlebgcolor = "#e4f1fb"; // 提示窗口的标题背景色
this.bgcolor = "#FFFFFF"; // 提示内容的背景色
this.MsgAlign="left";

this.Show=function(title, msg, framesrc, w, h)
{
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight+document.documentElement.scrollTop*2;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);

var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+this.bordercolor+";background-color:"+this.bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);

var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style.cssText = ";width:"+(w-84)+"px;height:"+this.titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+this.titlecolor+";cursor:move;background-color:" + this.titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = title;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;

titleBar.onmousedown = function(){
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);

document.onmousemove = function(){
if (moveable)
{
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) )
{
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};

document.onmouseup = function (){
if (moveable)
{
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}

var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + this.titlebgcolor;
closeBtn.innerHTML = "<span style="font-size:10pt;color:"+this.titlecolor+";" style="font-size:10pt;color:"+this.titlecolor+";" id='closeBtn'>×关闭窗口";
closeBtn.onclick = function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan = 2;

if(framesrc != "")
{
msg = "<iframe name='frmAlertWin' id='frmAlertWin' src="about:blank" src="about:blank" frameborder=0 marginwidth=0 marginheight=0 style='height:"+(h-this.titleheight-10)+"px;width:100%;'></iframe>";
}
msgBox.innerHTML = "<div style="\" style="\""text-align:"+this.MsgAlign+";\">"+msg+"</div>";

if(document.getElementById("frmAlertWin") != null)
{
document.getElementById("frmAlertWin").src = framesrc;
}

function getEvent(){
return window.event || arguments.callee.caller.arguments[0];
}
}
}

调用方式
var msgbox=new MessageBox();
msgbox.Show('站内公告',"小小提示","",500,220);///参数:标题,内容(提示为连接页面时可为空),连接页面地址(使用文字是可为空),宽度,高度
要注意的是如果在页面加载时就要弹出提示 请将调用代码放在body标记以后 否则在IE8下回出现错误

(0)

相关推荐

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

  • javascript 通过封装div方式弹出div窗体

    图1(弹出一个div) 图2(弹出多个)构造函数: 复制代码 代码如下: var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在

  • JS弹出居中的DIV的代码

    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义  document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度.大小随着浏览器的窗口大小而改变.  document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度.大小随着浏览器的窗口大小而改变.  document.body.scrollTop(网页被卷去的高):是指拉

  • 非常不错的弹出一个div的js代码

    LIGHTBOX EXAMPLE .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; posi

  • js实现非常棒的弹出div

    本文实例为大家分享了一个非常棒的弹出div,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8" /> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

  • js点击弹出div层实现可拖曳的弹窗效果

    弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad

  • 如何创建一个JavaScript弹出DIV窗口层的效果

    在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的

  • javascript div 弹出可拖动窗口

    /* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon

  • js实现div弹出层的方法

    本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv&quo

随机推荐