`
fenglingxuewqk
  • 浏览: 83346 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面弹出层方法

阅读更多
function openWin_h(src,w,h){
	var info = "<iframe name=hyh frameBorder=0 width=100% height=100% src='"+src+"'></iframe>";
	sAlert(info,w,h);
}
function sAlert(str,w,h){
	var msgw,msgh,bordercolor;
	if(w==null){
		msgw = 300;
	}else{
		msgw=w;// 提示窗口的宽度
	}
	if(h==null){
		msgh = 100;
	}else{
		msgh=h;// 提示窗口的高度
	}
	titlecolor = "#393c3e";// 提示窗口的边框颜色a7cadd,cfcdaf,5690a1,287798,73878c,242a1b,bdbdbd,3996c6,88beec,adc9f0,abd6e0
	bordercolor = "#eee";//提示窗口的标题颜色99aaff
	var sWidth,sHeight;
	sWidth=document.body.offsetWidth;
	//sWidth=window.screen.availWidth;
	sHeight=document.body.offsetHeight;
	//sHeight=window.screen.availheight;
	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";
	var hhhh = document.body.offsetHeight;
	bgObj.style.width=document.body.offsetWidth + "px";
	bgObj.style.height=document.body.clientHeight  + "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.body.scrollTop + (sHeight-msgh)/2) + "px";
	msgObj.style.top= 60 + "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= titlecolor;
	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 " + titlecolor;
	title.style.height="18px";
	title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
	title.style.color="648de1"; 
	title.style.fontWeight="bold";
	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);
}
function sClosed(){
	var bgObj = parent.document.getElementById("bgDiv");
	parent.document.body.removeChild(bgObj);
	parent.document.getElementById("msgDiv").removeChild(parent.document.getElementById("msgTitle"));
	parent.document.body.removeChild(parent.document.getElementById("msgDiv"));
	parent.location.reload();
}

 

分享到:
评论

相关推荐

    layer弹出层全屏及关闭方法

    在现代Web开发中,实现弹出层全屏展示以及关闭方法是提升用户交互体验的重要技术之一。layer是一款轻量级的页面弹出层插件,它提供了非常方便的方式来实现弹出层的全屏展示以及关闭操作。以下是layer弹出层全屏及...

    jquery弹出层不关闭 父页面刷新

    在创建弹出层时,我们可以利用jQuery的`.show()`或`.fadeIn()`方法来显示元素,而`.hide()`或`.fadeOut()`则用于隐藏。对于弹出层,通常是一个具有`position: fixed`属性的div元素,它会在页面上浮动,遮盖住其他...

    精美网页弹出层大全

    网页弹出层是网页设计中常见的一种交互元素,主要用于显示重要的信息、提示、警告或进行交互操作。在“精美网页弹出层大全”这个资源包中,包含了多种不同风格和功能的弹出层实现,主要涉及到的技术有JavaScript(JS...

    .net中弹出层显示效果

    在.NET开发中,弹出层通常用于在用户与网页交互时提供信息提示、确认操作或者展示详细内容。这种效果能够增强用户体验,使页面看起来更加专业和美观。在本例中,我们将探讨如何在.NET环境中创建具有多层显示、包含...

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题,特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中,"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

    jQuery顶部浮动弹出层动画弹出层特效

    弹出层是一种网页设计技术,它可以在用户与页面交互时,以对话框的形式显示额外的信息,而不会完全中断用户与主页面的互动。这些弹出层通常用于显示通知、广告、表单或任何需要突出显示的内容。 在jQuery中,我们...

    js弹出窗口、弹出层

    弹出层,也被称为模态对话框,是在当前页面上覆盖一层半透明或全屏的元素,焦点被锁定在这一层,用户必须先关闭弹出层才能继续与页面交互。实现弹出层的方式有很多种,包括但不限于HTML、CSS和JavaScript的组合使用...

    JS弹出层源代码

    JavaScript(简称JS)是一种轻...总的来说,理解和掌握JS弹出层的实现方法对于前端开发者来说是一项重要的技能。通过分析和使用提供的源代码,可以加深对这一概念的理解,并将其应用到实际项目中,提升网页的用户体验。

    很犀利的弹出层,弹出层代码

    在网页设计和开发中,弹出层是一种常见的交互元素,用于提供额外的信息或者进行特定的操作。弹出层通常包括模态对话框、提示框、下拉菜单等,它们能够以不打断用户主流程的方式显示信息或请求用户输入。标题中的“很...

    jquery弹出层 jquery弹出层 jquery弹出层

    弹出层,也称为模态窗口,是在用户与网页交互时临时出现在页面上的一个浮动元素,它遮盖住背景内容,直到用户与弹出层进行交互或关闭它。弹出层可以用于展示详细信息、进行表单填写、播放媒体等,而不干扰用户对主...

    弹出层封装_1

    在IT行业中,弹出层和遮罩层是网页交互设计中的常见元素,它们用于提供信息、展示内容或者进行用户交互。本项目“弹出层封装_1”利用jQuery、HTML5和CSS3技术实现了功能丰富的弹出层效果,包括多角度提示以及关闭...

    jquery 弹出层

    在网页上,弹出层通常用于显示额外的信息、用户确认、表单输入或执行其他交互操作。 jQuery 实现弹出层的方法多种多样,但这里我们主要讨论基于给定的标签“GreyBox_v5_54”的情况。GreyBox 是一个开源的 jQuery ...

    jQuery弹出层 可移动层 提示框 浮动层

    例如,我们可以使用`$(element).draggable()`方法使弹出层具备拖动功能,同时使用CSS定位使其浮动于页面之上。 描述中提到,由于这是一个简化版,可能不适用于已有CSS框架的项目,因此没有提供`cssurl`属性和`...

    jQuery网页弹出层分享按钮插件

    本主题涉及的是一个基于jQuery的网页弹出层分享按钮插件,它旨在为网站提供一种简单、灵活的方式,让用户能够方便地分享网页内容到各种社交媒体平台。 该插件的核心功能是创建弹出层,当用户点击某个触发元素(如...

    导航弹出层

    在网页设计和开发中,"导航弹出层"是一种常见的交互元素,用于提供额外的信息或者功能,而不会中断用户在主页面上的浏览体验。这种设计通常结合JavaScript(JS)实现,因为JavaScript能赋予网页动态性和交互性。接...

    js弹出层并获取弹出层文本内容

    在JavaScript中,弹出层通常指的是通过编程方式在网页上动态创建或显示一个浮动的div元素,用于展示信息、提示用户或收集用户输入。这种技术广泛应用于网页交互设计,尤其在不需要新窗口或完全刷新页面的情况下。在...

    jquery弹出层特效

    在网页设计中,弹出层通常用于显示警告信息、用户登录表单、确认对话框或其他需要在当前页面之上显示的内容,而不会中断用户的浏览体验。这种效果可以通过添加额外的CSS样式和JavaScript代码来实现。 描述中的...

    jquery弹出层

    在网页设计中,弹出层是一种常见的交互方式,用于在不离开当前页面的情况下展示额外的信息或功能。jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,使得实现弹出层效果变得简单易行。本文将深入探讨...

    JQuery弹出层类库

    在Web开发中,弹出层(Modal)是一种常见的交互设计,用于在用户与主页面交互时展示额外信息或进行特定操作。jQuery,作为一个广泛使用的JavaScript库,提供了丰富的插件和扩展来实现弹出层功能。本篇文章将深入探讨...

Global site tag (gtag.js) - Google Analytics