网站开发中常常会用到提示信息,我们首先会想到用 alert(‘提示信息’)进行提示,但是这样往往不是很美观。所以我们用弹出层(div)加一些样式,这样就显得比较美观。
废话少说,代码贴出来吧
//JS
function showDetail(str,url) {
//背景
var bgObj=document.getElementById("bgDiv");
bgObj.style.width = document.body.offsetWidth + "px";
bgObj.style.height = screen.height + "px";
//定义窗口
var msgObj=document.getElementById("msgDiv");
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
//关闭
document.getElementById("msgClose").onclick = function(){
bgObj.style.display = msgObj.style.display = "none";
window.location.href=url;
}
msgObj.style.display = bgObj.style.display = "block";
switch(getOs())
{
case 1:
document.getElementById("msgDetail").innerHTML=str;
break;
case 2:
document.getElementById("msgDetail").innerHTML=str;
break;
}
}
function getOs() //判断浏览器类别
{
if(navigator.userAgent.indexOf("MSIE")>0)return 1;//IE
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;//Firefox
if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 3;
if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 4;
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 5;
return 0;
}
//样式
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#msgDiv {
z-index:10001;//关键是这饿元素:比10001小的都在MSGDIV下面
width:400px;
height:250px;
background:white;
border:#336699 1px solid;
position:absolute;
left:50%;
top:50%;
font-size:12px;
margin-left:-225px;
display: none;
}
#bgDiv
{
z-index:10000;
display: none;
position: absolute;
top: 0px;
left: 0px;
right:0px;
background-color: #777;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.6;
}
#msgShut
{
display:block;
height:27px;
background-image:url(images/win_top.png); background-repeat:repeat-x; background-position:left top;
}
后台调用的时候
Page.RegisterStartupScript("", "<script>showDetail('" + outPutStr + "','" + linkUrl + "');</script>");
分享到:
相关推荐
"相当实用的弹出层+信息翻页显示"这一技术,正是为了提升用户在浏览网站时的交互性和信息展示效率。通过结合弹出层和信息翻页功能,开发者可以更加有效地管理网页上的大量内容,避免页面过于拥挤,同时提供更直观的...
标题中的“很犀利的弹出层,弹出层代码”暗示我们将探讨一种高效且实用的弹出层实现方法。 弹出层的核心在于JavaScript和CSS的结合使用。JavaScript用于控制弹出层的显示、隐藏以及与用户的交互,而CSS则负责样式...
在网页设计中,"实用div实现的弹出层" 是一种常见的交互元素,它用于创建弹出式的对话框或菜单,以提供额外的信息或者功能,而不会干扰到页面的主体内容。这种技术主要依赖于HTML的`<div>`元素,CSS(层叠样式表)...
总结来说,“弹出层封装_1”项目利用现代Web技术,创建了一个具有多种提示角度和关闭功能的弹出层组件,这在网页应用中非常实用,可以提升用户的互动体验。通过理解这些知识点,开发者可以更好地掌握网页动态元素的...
《jQuery弹出层技术详解与应用实践》 在网页设计中,弹出层是一种常见的交互方式,用于在不离开当前页面的情况下展示额外的信息或功能。jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,使得实现弹出层...
JavaScript(简称JS)弹出层是一种常见的网页交互设计,它可以在用户与网页交互时弹出一个浮动窗口,显示额外的信息、提示或者进行某些操作。在网页开发中,弹出层通常用于实现模态对话框、警告提示、信息确认、表单...
在网页设计和开发中,弹出层效果是一种常见的交互元素,用于显示额外的信息或功能,如提示、对话框、表单、图片预览等。"实用的弹出层效果"和"实用漂亮的弹出层效果"这两点描述,强调了弹出层不仅需要功能实用,而且...
弹出层在用户界面上创建了一个临时突出显示的区域,用于显示额外的信息、提示、表单或者任何需要用户注意的内容,而不会中断主页面的工作流程。本知识点将详细讲解“简单好用的JS弹出层”所涉及的技术和特性。 首先...
描述中的“很方便好用的弹出层,前台开发需要弹出层时很好用”,强调了这个弹出层的易用性和实用性,适合前端开发者快速集成到项目中,以提供更好的用户体验。这意味着该弹出层可能具有良好的API设计,易于定制和...
在网页设计中,弹出层(也称为模态窗口或对话框)是一种常见的交互元素,用于显示额外的信息、提示用户操作或者进行表单填写等。jQuery作为一个强大的JavaScript库,提供了简便的方式来创建和控制这些弹出层,使得...
《ymPrompt:构建高效弹出层与消息提示的前端框架》 ymPrompt 是一款专为前端开发者设计的轻量级、高效能的弹出层与消息提示框架。它基于JavaScript技术,旨在帮助开发者轻松实现各种复杂的弹出层效果和动态消息...
这个组件允许用户自定义和拖动弹出窗口,提供了一种非模态(非阻塞)的对话体验,使得用户可以在不关闭当前页面的情况下与弹出层进行交互。这种设计在网页应用中非常常见,例如用于显示详情、编辑表单或提示信息。 ...
总结来说,这个"代码简洁的点击弹出层源码"实例提供了一个学习和参考的例子,展示了如何使用HTML、CSS和JavaScript创建一个美观且实用的弹出层。通过分析和理解这个源码,开发者可以提升自己的前端技能,更好地理解...
"很实用的jQuery鼠标经过弹出层效果"是一个常见的交互设计功能,通常用于提供信息提示或者增强用户体验。这个效果允许当用户将鼠标悬停在某个元素上时,一个浮动的层(通常称为“弹出层”或“气泡提示”)会显示相关...
信息提示弹出层插件是这样一种工具,它能够在网页或应用程序中优雅地显示各种提示信息,增强用户与系统的沟通。在这个名为"信息提示弹出层插件.zip"的压缩包中,我们可能找到了一个专门用于实现这一功能的JavaScript...
总的来说,jQuery弹出层插件是Web开发中的实用工具,它简化了弹出层的创建和管理,使得开发者能更专注于应用逻辑而不是基础的交互设计。无论是简单的提示信息还是复杂的对话框,jQuery弹出层插件都能提供灵活的解决...
ASP.NET绝对居中弹出层是一种常见的Web应用交互设计,常用于显示重要的信息或进行用户交互,如登录对话框、消息提示或表单提交。在ASP.NET框架中,结合JavaScript和CSS,我们可以创建一个高性能、高用户体验的弹出...
它简化了弹出层的实现过程,同时提供了丰富的定制选项,使得设计师和开发者能够创建出既美观又实用的弹出层效果。通过深入理解和熟练运用zeroModal,我们可以为用户提供更加高效、友好的网页交互体验。
在网页设计和开发中,弹出层是一种常见的交互元素,用于显示消息、警告、确认对话框或进行表单输入等。zDialog是一个基于jQuery的轻量级弹出层插件,它为开发者提供了便捷的方式来创建美观且功能丰富的弹出窗口。...
在Web开发中,弹出层(也称作对话框或模态窗口)是不可或缺的一部分,它们通常用于显示重要的信息、提示、表单或者进行用户交互。jQuery Boxy 0.1.4就是这样一款备受开发者喜爱的弹出层插件。它以其易用性、灵活性和...