登陸界麵,灰掉主界麵。。得解決方法

本文介绍了一种使用HTML和JavaScript实现自定义弹窗的方法。通过编写特定的HTML结构和JavaScript代码,可以创建一个带有背景遮罩和自定义样式的弹窗,并能够响应用户的点击事件来关闭弹窗。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<HTML><HEAD>
<META content="MSHTML 6.00.2800.1586" name=GENERATOR></HEAD>
<BODY><INPUT onclick="sAlert('测试效果<br/>还可以直接书写HTML代码 <br/>&copy; 2006');" type=button value=点击这里>
<SCRIPT language=javascript type=text/javascript>
function sAlert(str){
var msgw,msgh,bordercolor;
msgw
=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth
=document.body.offsetWidth;
sHeight
=document.body.offsetHeight;

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";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute(
"id","msgDiv");
msgObj.setAttribute(
"align","center");
msgObj.style.position
="absolute";
msgObj.style.background
="white";
msgObj.style.font
="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border
="1px solid " + bordercolor;
msgObj.style.width
=msgw + "px";
msgObj.style.height
=msgh + "px";
msgObj.style.top
=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
msgObj.style.left=(sWidth-msgw)/2 + "px";
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>
</BODY></HTML>

 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值