js弹窗层支持html代码

最新推荐文章于 2021-06-25 18:12:38 发布

咕噜咕噜鱼s

最新推荐文章于 2021-06-25 18:12:38 发布

阅读量842

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/a6942979/article/details/50611048

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何创建一个支持HTML代码且能适应手机和平板设备的JavaScript弹窗层。内容涵盖如何实现弹窗的响应式设计，使其在不同屏幕尺寸下保持良好显示效果。

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

js弹窗层支持html代码

<input type="button" value="点击这里" onclick="sAlert('<b>手机微信扫描分享</b><br><img src=>');" />

<script type="text/javascript" language="javascript">
	function sAlert(str){
	var msgw,msgh,bordercolor,topcolor,bodybackground,neirongbackground;
		msgw=400;//提示窗口的宽度
		msgh=400;//提示窗口的高度
		bodybackground="#fff";//大背景颜色
		bordercolor="#F6F6F6";//提示窗口的边框颜色
		titlecolor="#000";//提示窗口的标题颜色
		topcolor="#F6F6F6";//提示窗口的标题背景颜色
		neirongbackground="#FFF";//提示内容背景色

	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=bodybackground;
		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=neirongbackground;
		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=topcolor;
		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 " + topcolor;
		title.style.height="18px";
		title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
		title.style.color=titlecolor;
		title.style.cursor="pointer";
		title.innerHTML="X";
		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>

下面是修改成自适应手机或平板的信息弹窗

<script type="text/javascript" language="javascript">
	function sAlert(str){
	var bordercolor,topcolor,bodybackground,neirongbackground;
		bodybackground="#fff";//大背景颜色
		bordercolor="#F6F6F6";//提示窗口的边框颜色
		titlecolor="#000";//提示窗口的标题颜色
		topcolor="#F6F6F6";//提示窗口的标题背景颜色
		neirongbackground="#FFF";//提示内容背景色

	var msgw,msgh,sWidth,sHeight;
		sWidth=document.body.offsetWidth;
//		sWidth=document.documentElement.clientWidth;
		sHeight=document.documentElement.clientHeight;
		sHeight2=document.body.offsetHeight;
		msgw=sWidth*0.8;//提示窗口的宽度
		if(sWidth>720)msgw=sHeight*0.8;
		msgh=msgw;//提示窗口的高度
	var bgObj=document.createElement("div");
		bgObj.setAttribute('id','ys_bgDiv');
		bgObj.style.position="absolute";
		bgObj.style.top="0";
		bgObj.style.background=bodybackground;
		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=sHeight2+ "px";
		document.body.appendChild(bgObj);
	var msgObj=document.createElement("div")
		msgObj.setAttribute("id","ys_msgDiv");
		msgObj.setAttribute("align","center");
		msgObj.style.position="absolute";
		msgObj.style.background=neirongbackground;
		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","ys_msgTitle");
		title.setAttribute("align","right");
		title.style.margin="0";
		title.style.padding="3px";
		title.style.background=topcolor;
		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 " + topcolor;
		title.style.height="18px";
		title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
		title.style.color=titlecolor;
		title.style.cursor="pointer";
		title.innerHTML="X";
		title.onclick=function(){
			document.body.removeChild(bgObj);
			document.getElementById("ys_msgDiv").removeChild(title);
			document.body.removeChild(msgObj);
		}
		document.body.appendChild(msgObj);
		document.getElementById("ys_msgDiv").appendChild(title);
	var txt=document.createElement("p");
		txt.style.margin="1em 0"
		txt.setAttribute("id","ys_msgTxt");
		txt.innerHTML=str;
		document.getElementById("ys_msgDiv").appendChild(txt);
	}
        </script>