87,924
社区成员
发帖
与我相关
我的任务
分享
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
font-size: 12px;
margin: 0px;
height: 100%;
}
.mesWindow
{
z-index: 1001;
border: #666 1px solid;
background: #fff;
}
.mesWindowTop
{
border-bottom: #eee 1px solid;
margin-left: 4px;
padding: 3px;
font-weight: bold;
text-align: left;
font-size: 12px;
height: 20px;
cursor: move;
}
.mesWindowContent
{
margin: 4px;
font-size: 12px;
vertical-align: middle;
}
.mesWindow .close
{
text-align: right;
cursor: pointer;
}
</style>
<script type="text/javascript">
//判断浏览器是否为IE
var isIe = (document.all) ? true : false;
//弹出方法
function showMessageBox(wTitle, content) {
var msgw, msgh, bordercolor;
msgw = 380; //提示窗口的宽度
msgh = 120; //提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#333"; //提示窗口的边框颜色
titlecolor = "#445588"; //提示窗口的标题颜色
closeWindow();
var bWidth = parseInt(document.body.scrollWidth); //网页正文全文宽
var bHeight = parseInt(window.screen.availHeight); //网页正文全文高
var back = document.createElement("div"); //创建北京div对象
back.id = "back";
var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:" + bWidth + "px;height:" + bHeight + "px;";
styleStr += (isIe) ? "filter:alpha(opacity=10);" : "opacity:10;";
back.style.cssText = styleStr;
back.style.zIndex = "1000";
if (isIe) {
back.innerHTML = "<iframe style='position: absolute; width:\"100%\"; height:\"100%\";' frameborder='0'>afafa </iframe>";
}
document.body.appendChild(back);
//showBackground(back, 50);
var mesW = document.createElement("div"); //创建信息窗口对象div
mesW.id = "mesWindow";
mesW.className = "mesWindow";
mesW.innerHTML = "<div class='mesWindowTop' onmousedown=\"Move('mesWindow')\">"
+ "<table width='100%' height='100%'>"
+ "<tr>"
+ "<td>" + wTitle + "</td>"
+ "<td align='right'><a onclick='closeWindow();' title='关闭窗口' class='close'>关闭</a></td>"
+ "</tr></table></div>"
+ "<div class='mesWindowContent' id='mesWindowContent'>" + content + "</div>"
+ "<div class='mesWindowBottom'></div>";
//styleStr = "left:" + (((pos.x - wWidth) > 0) ? (pos.x - wWidth) : pos.x) + "px;top:" + (pos.y) + "px;position:absolute;width:" + wWidth + "px;";
styleStr = "left:" + (bWidth - msgw) / 2 + "px;top:35%;position:absolute;width:" + msgw + "px;height:" + msgh + "px;text-align:center;";
mesW.style.cssText = styleStr;
document.body.appendChild(mesW);
}
function closeWindow() {
if (document.getElementById('back') != null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if (document.getElementById('mesWindow') != null) {
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//拖拽图层
var ms = 0;
function Move(obj) {
ms = obj;
event.srcElement.setCapture();
x = document.all(ms).style.pixelLeft - event.x;
y = document.all(ms).style.pixelTop - event.y;
}
function document.onmousemove() {
if (ms != "") {
document.all(ms).style.pixelLeft = x + event.x;
document.all(ms).style.pixelTop = y + event.y;
}
}
function document.onmouseup() {
if (ms != "") {
event.srcElement.releaseCapture();
ms = 0;
}
}
//测试弹出
function testMessageBox(ev) {
messContent = "什么东西啊";
showMessageBox('窗口标题', messContent);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: left">
<a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<select>
<option value="0">请选择</option>
</select>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<select id="Select1">
<option></option>
</select>
</form>
</body>
</html>
// var isIe = (document.getElementById)? true: false;
// 改为
var isIe = (document.all) ? true : false;
<script>function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//Width
msgh=200;//Height
titleheight=25 //title Height
bordercolor="#336699";//boder color
titlecolor="#99CCFF";//title color
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
<a href="#" onclick="sAlert('内容...');return false;" >弹出窗口 </a>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body
{
font-size: 12px;
margin: 0px;
height: 100%;
}
.mesWindow
{
z-index: 1001;
border: #666 1px solid;
background: #fff;
}
.mesWindowTop
{
border-bottom: #eee 1px solid;
margin-left: 4px;
padding: 3px;
font-weight: bold;
text-align: left;
font-size: 12px;
height: 20px;
cursor: move;
}
.mesWindowContent
{
margin: 4px;
font-size: 12px;
vertical-align: middle;
}
.mesWindow .close
{
text-align: right;
cursor: pointer;
}
</style>
<script type="text/javascript">
//判断浏览器是否为IE
var isIe = (document.all) ? true : false;
var ms = "", x=y=0;
//弹出方法
function showMessageBox(wTitle, content) {
var msgw, msgh, bordercolor;
msgw = 380; //提示窗口的宽度
msgh = 120; //提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#333"; //提示窗口的边框颜色
titlecolor = "#445588"; //提示窗口的标题颜色
closeWindow();
var bWidth = parseInt(document.body.scrollWidth); //网页正文全文宽
var bHeight = parseInt(window.screen.availHeight); //网页正文全文高
var back = document.createElement("div"); //创建北京div对象
back.id = "back";
var styleStr = "top:0px;left:0px;position:absolute;background-color:#000000;width:" + bWidth + "px;height:" + bHeight + "px;";
styleStr += (isIe) ? "filter:alpha(opacity=50);" : "opacity:.5;";
if(isIe) {
back.style.cssText = styleStr;
} else {
back.setAttribute('style', styleStr);
}
back.style.zIndex = "1000";
/*if (isIe) {
back.innerHTML = "<iframe style='position: absolute; width:\"100%\"; height:\"100%\";' frameborder='0'>afafa </iframe>";
}*/
document.body.appendChild(back);
//showBackground(back, 50);
var mesW = document.createElement("div"); //创建信息窗口对象div
mesW.id = "mesWindow";
mesW.className = "mesWindow";
mesW.innerHTML = "<div class='mesWindowTop' onmousedown=\"Move(event, 'mesWindow')\">"
+ "<table width='100%' height='100%'>"
+ "<tr>"
+ "<td>" + wTitle + "</td>"
+ "<td align='right'><a onclick='closeWindow();' title='关闭窗口' class='close'>关闭</a></td>"
+ "</tr></table></div>"
+ "<div class='mesWindowContent' id='mesWindowContent'>" + content + "</div>"
+ "<div class='mesWindowBottom'></div>";
//styleStr = "left:" + (((pos.x - wWidth) > 0) ? (pos.x - wWidth) : pos.x) + "px;top:" + (pos.y) + "px;position:absolute;width:" + wWidth + "px;";
styleStr = "left:" + (bWidth - msgw) / 2 + "px;top:" +
((document.body.clientHeight - msgh)/2) +
"px;position:absolute;width:" + msgw + "px;height:" + msgh + "px;text-align:center;";
if(isIe) {
mesW.style.cssText = styleStr;
} else {
mesW.setAttribute('style', styleStr);//alert(mesW.style.top);
}
document.body.appendChild(mesW);
}
function closeWindow() {
if (document.getElementById('back') != null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if (document.getElementById('mesWindow') != null) {
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//拖拽图层
var ms = 0;
function Move(event, obj) {
event = event || window.event;
ms = obj;
//target.setCapture();
x = parseInt(document.getElementById(ms).style.left) - event.clientX;
y = parseInt(document.getElementById(ms).style.top) - event.clientY;
}
document.onmousemove = function(event) {
event = event || window.event;
if (ms) {
document.getElementById(ms).style.left = (x + event.clientX) + 'px';
document.getElementById(ms).style.top = (y + event.clientY) + 'px';
//document.getElementById(ms).innerHTML = event.x;
}
}
document.onmouseup = function(event) {
event = event || window.event;
if (ms) {
//target.releaseCapture();
ms = "";
}
}
//测试弹出
function testMessageBox(ev) {
messContent = "什么东西啊";
showMessageBox('窗口标题', messContent);
}
</script>
</head>
<body>
<div style="text-align: left">
<a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<select>
<option value="0">请选择</option>
</select>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
font-size: 12px;
margin: 0px;
height: 100%;
}
.mesWindow
{
z-index: 1001;
border: #666 1px solid;
background: #fff;
}
.mesWindowTop
{
border-bottom: #eee 1px solid;
margin-left: 4px;
padding: 3px;
font-weight: bold;
text-align: left;
font-size: 12px;
height: 20px;
cursor: move;
}
.mesWindowContent
{
margin: 4px;
font-size: 12px;
vertical-align: middle;
}
.mesWindow .close
{
text-align: right;
cursor: pointer;
}
</style>
<script type="text/javascript">
//判断浏览器是否为IE
var isIe = (document.all) ? true : false;
//弹出方法
function showMessageBox(wTitle, content) {
var msgw, msgh, bordercolor;
msgw = 380; //提示窗口的宽度
msgh = 120; //提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#333"; //提示窗口的边框颜色
titlecolor = "#445588"; //提示窗口的标题颜色
closeWindow();
var bWidth = parseInt(document.body.scrollWidth); //网页正文全文宽
var bHeight = parseInt(window.screen.availHeight); //网页正文全文高
var back = document.createElement("div"); //创建北京div对象
back.id = "back";
var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:" + bWidth + "px;height:" + bHeight + "px;";
styleStr += (isIe) ? "filter:alpha(opacity=10);" : "opacity:10;";
back.style.cssText = styleStr;
back.style.zIndex = "1000";
if (isIe) {
back.innerHTML = "<iframe style='position: absolute; width:\"100%\"; height:\"100%\";' frameborder='0'>afafa </iframe>";
}
document.body.appendChild(back);
//showBackground(back, 50);
var mesW = document.createElement("div"); //创建信息窗口对象div
mesW.id = "mesWindow";
mesW.className = "mesWindow";
mesW.innerHTML = "<div class='mesWindowTop' onmousedown=\"Move('mesWindow')\">"
+ "<table width='100%' height='100%'>"
+ "<tr>"
+ "<td>" + wTitle + "</td>"
+ "<td align='right'><a onclick='closeWindow();' title='关闭窗口' class='close'>关闭</a></td>"
+ "</tr></table></div>"
+ "<div class='mesWindowContent' id='mesWindowContent'>" + content + "</div>"
+ "<div class='mesWindowBottom'></div>";
//styleStr = "left:" + (((pos.x - wWidth) > 0) ? (pos.x - wWidth) : pos.x) + "px;top:" + (pos.y) + "px;position:absolute;width:" + wWidth + "px;";
styleStr = "left:" + (bWidth - msgw) / 2 + "px;top:35%;position:absolute;width:" + msgw + "px;height:" + msgh + "px;text-align:center;";
mesW.style.cssText = styleStr;
document.body.appendChild(mesW);
}
function closeWindow() {
if (document.getElementById('back') != null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if (document.getElementById('mesWindow') != null) {
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//拖拽图层
var ms = 0;
function Move(obj) {
ms = obj;
event.srcElement.setCapture();
x = document.all(ms).style.pixelLeft - event.x;
y = document.all(ms).style.pixelTop - event.y;
}
document.onmousemove=function(){
if (ms != "") {
document.all(ms).style.pixelLeft = x + event.x;
document.all(ms).style.pixelTop = y + event.y;
}
}
document.onmouseup=function() {
if (ms != "") {
event.srcElement.releaseCapture();
ms = 0;
}
}
//测试弹出
function testMessageBox(ev) {
var messContent = "什么东西啊";
showMessageBox('窗口标题', messContent);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: left">
<a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<select>
<option value="0">请选择</option>
</select>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<select id="Select1">
<option></option>
</select>
</form>
</body>
</html>
<!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>
<title>网页中弹出小窗口,页面背景逐渐变为半透明</title>
<style>
html, body
{
font-size: 12px;
margin: 0px;
height: 100%;
}
.mesWindow
{
border: #666 1px solid;
background: #fff;
}
.mesWindowTop
{
border-bottom: #eee 1px solid;
margin-left: 4px;
padding: 3px;
font-weight: bold;
text-align: left;
font-size: 12px;
}
.mesWindowContent
{
margin: 4px;
font-size: 12px;
}
.mesWindow .close
{
height: 15px;
width: 28px;
border: none;
cursor: pointer;
text-decoration: underline;
background: #fff;
}
</style>
<script>
var isIe = (document.all) ? true : false;
//设置select的可见状态
function setSelectState(state) {
var objl = document.getElementsByTagName('select');
for (var i = 0; i < objl.length; i++) {
objl[i].style.visibility = state;
}
}
function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle, content, pos, wWidth) {
closeWindow();
var bWidth = parseInt(document.documentElement.scrollWidth);
var bHeight = parseInt(document.documentElement.scrollHeight);
if (isIe) {
setSelectState('hidden');
}
var back = document.createElement("div");
back.id = "back";
var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:" + bWidth + "px;height:" + bHeight + "px;";
styleStr += (isIe) ? "filter:alpha(opacity=0);" : "opacity:0;";
back.style.cssText = styleStr;
document.body.appendChild(back);
showBackground(back, 50);
var mesW = document.createElement("div");
mesW.id = "mesWindow";
mesW.className = "mesWindow";
mesW.innerHTML = "<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>" + wTitle + "</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>" + content + "</div><div class='mesWindowBottom'></div>";
styleStr = "left:" + (((pos.x - wWidth) > 0) ? (pos.x - wWidth) : pos.x) + "px;top:" + (pos.y) + "px;position:absolute;width:" + wWidth + "px;";
mesW.style.cssText = styleStr;
document.body.appendChild(mesW);
}
//让背景渐渐变暗
function showBackground(obj, endInt) {
if (isIe) {
obj.filters.alpha.opacity += 1;
if (obj.filters.alpha.opacity < endInt) {
setTimeout(function() { showBackground(obj, endInt) }, 5);
}
} else {
var al = parseFloat(obj.style.opacity); al += 0.01;
obj.style.opacity = al;
if (al < (endInt / 100))
{ setTimeout(function() { showBackground(obj, endInt) }, 5); }
}
}
//关闭窗口
function closeWindow() {
if (document.getElementById('back') != null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if (document.getElementById('mesWindow') != null) {
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if (isIe) {
setSelectState('');
}
}
//测试弹出
function testMessageBox(ev) {
var objPos = mousePosition(ev);
messContent = "<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题', messContent, objPos, 350);
}
</script>
</head>
<body>
<div style="padding: 20px">
<div style="text-align: left;">
<a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align: left; padding-left: 20px; padding-top: 10px">
<select id="Select1" name="Select1">
<option>下拉</option>
</select>弹出窗口时会将其隐藏,关闭时会让其显示,目的是在IE中防止弹出的DIV挡不住下拉框</div>
<div style="text-align: center">
<a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align: right">
<a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
</div>
</body>
</html>