`

实用弹出层进行提示

阅读更多

网站开发中常常会用到提示信息,我们首先会想到用 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实现的弹出层

    在网页设计中,"实用div实现的弹出层" 是一种常见的交互元素,它用于创建弹出式的对话框或菜单,以提供额外的信息或者功能,而不会干扰到页面的主体内容。这种技术主要依赖于HTML的`&lt;div&gt;`元素,CSS(层叠样式表)...

    弹出层封装_1

    总结来说,“弹出层封装_1”项目利用现代Web技术,创建了一个具有多种提示角度和关闭功能的弹出层组件,这在网页应用中非常实用,可以提升用户的互动体验。通过理解这些知识点,开发者可以更好地掌握网页动态元素的...

    jquery弹出层

    《jQuery弹出层技术详解与应用实践》 在网页设计中,弹出层是一种常见的交互方式,用于在不离开当前页面的情况下展示额外的信息或功能。jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,使得实现弹出层...

    JS弹出层大集合。很多好用的JS弹出层代码

    JavaScript(简称JS)弹出层是一种常见的网页交互设计,它可以在用户与网页交互时弹出一个浮动窗口,显示额外的信息、提示或者进行某些操作。在网页开发中,弹出层通常用于实现模态对话框、警告提示、信息确认、表单...

    实用的弹出层效果

    在网页设计和开发中,弹出层效果是一种常见的交互元素,用于显示额外的信息或功能,如提示、对话框、表单、图片预览等。"实用的弹出层效果"和"实用漂亮的弹出层效果"这两点描述,强调了弹出层不仅需要功能实用,而且...

    简单好用的JS 弹出层代码

    弹出层在用户界面上创建了一个临时突出显示的区域,用于显示额外的信息、提示、表单或者任何需要用户注意的内容,而不会中断主页面的工作流程。本知识点将详细讲解“简单好用的JS弹出层”所涉及的技术和特性。 首先...

    一个简单好用的弹出层

    描述中的“很方便好用的弹出层,前台开发需要弹出层时很好用”,强调了这个弹出层的易用性和实用性,适合前端开发者快速集成到项目中,以提供更好的用户体验。这意味着该弹出层可能具有良好的API设计,易于定制和...

    漂亮的jquery 弹出层

    在网页设计中,弹出层(也称为模态窗口或对话框)是一种常见的交互元素,用于显示额外的信息、提示用户操作或者进行表单填写等。jQuery作为一个强大的JavaScript库,提供了简便的方式来创建和控制这些弹出层,使得...

    ymPrompt 一个非常实用的弹出层、消息提示框架

    《ymPrompt:构建高效弹出层与消息提示的前端框架》 ymPrompt 是一款专为前端开发者设计的轻量级、高效能的弹出层与消息提示框架。它基于JavaScript技术,旨在帮助开发者轻松实现各种复杂的弹出层效果和动态消息...

    bootstrap可拖拽弹出层

    这个组件允许用户自定义和拖动弹出窗口,提供了一种非模态(非阻塞)的对话体验,使得用户可以在不关闭当前页面的情况下与弹出层进行交互。这种设计在网页应用中非常常见,例如用于显示详情、编辑表单或提示信息。 ...

    代码简洁的点击弹出层源码

    总结来说,这个"代码简洁的点击弹出层源码"实例提供了一个学习和参考的例子,展示了如何使用HTML、CSS和JavaScript创建一个美观且实用的弹出层。通过分析和理解这个源码,开发者可以提升自己的前端技能,更好地理解...

    很实用的 jQuery鼠标经过弹出层效果

    "很实用的jQuery鼠标经过弹出层效果"是一个常见的交互设计功能,通常用于提供信息提示或者增强用户体验。这个效果允许当用户将鼠标悬停在某个元素上时,一个浮动的层(通常称为“弹出层”或“气泡提示”)会显示相关...

    信息提示弹出层插件.zip

    信息提示弹出层插件是这样一种工具,它能够在网页或应用程序中优雅地显示各种提示信息,增强用户与系统的沟通。在这个名为"信息提示弹出层插件.zip"的压缩包中,我们可能找到了一个专门用于实现这一功能的JavaScript...

    jquery 弹出层插件

    总的来说,jQuery弹出层插件是Web开发中的实用工具,它简化了弹出层的创建和管理,使得开发者能更专注于应用逻辑而不是基础的交互设计。无论是简单的提示信息还是复杂的对话框,jQuery弹出层插件都能提供灵活的解决...

    ASP.NET 绝对居中弹出层

    ASP.NET绝对居中弹出层是一种常见的Web应用交互设计,常用于显示重要的信息或进行用户交互,如登录对话框、消息提示或表单提交。在ASP.NET框架中,结合JavaScript和CSS,我们可以创建一个高性能、高用户体验的弹出...

    zeroModal-扁平化风格jQuery弹出层插件

    它简化了弹出层的实现过程,同时提供了丰富的定制选项,使得设计师和开发者能够创建出既美观又实用的弹出层效果。通过深入理解和熟练运用zeroModal,我们可以为用户提供更加高效、友好的网页交互体验。

    zDialog是一个很实用的jquery弹出层

    在网页设计和开发中,弹出层是一种常见的交互元素,用于显示消息、警告、确认对话框或进行表单输入等。zDialog是一个基于jQuery的轻量级弹出层插件,它为开发者提供了便捷的方式来创建美观且功能丰富的弹出窗口。...

    jquery-boxy 0.1.4 好用的弹出层

    在Web开发中,弹出层(也称作对话框或模态窗口)是不可或缺的一部分,它们通常用于显示重要的信息、提示、表单或者进行用户交互。jQuery Boxy 0.1.4就是这样一款备受开发者喜爱的弹出层插件。它以其易用性、灵活性和...

Global site tag (gtag.js) - Google Analytics