`
xiangqian0505
  • 浏览: 322280 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 弹出提示遮罩层

 
阅读更多
<HTML>  
<body>  
<script language="JavaScript">  
function salert(str){   
   var msgw,msgh,bordercolor;   
   msgw=400;//提示窗口的宽度   
   msgh=100;//提示窗口的高度   
   titleheight=25 //提示窗口标题高度   
   bordercolor="#336699";//提示窗口的边框颜色   
   titlecolor="#99ccff";//提示窗口的标题颜色   
      
   var swidth,sheight;   
   swidth=document.body.offsetWidth;   
   sheight=document.body.offsetHeight;   
   if (sheight<screen.height)   
   {   
    sheight=screen.height;   
   }   
  
   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";   
   bgobj.style.zindex = "10000";   
   document.body.appendChild(bgobj);   
      
   var msgobj=document.createElement("div")   
   msgobj.setAttribute("id","msgdiv");   
   msgobj.setAttribute("align","center");   
   msgobj.style.background="white";   
   msgobj.style.border="1px solid " + bordercolor;   
      msgobj.style.position = "absolute";   
            msgobj.style.left = "50%";   
            msgobj.style.top = "50%";   
            msgobj.style.font="12px/1.6em verdana, geneva, arial, helvetica, sans-serif";   
            msgobj.style.marginLeft = "-225px" ;   
            msgobj.style.marginTop = -75+document.documentElement.scrollTop+"px";   
            msgobj.style.width = msgw + "px";   
            msgobj.style.height =msgh + "px";   
            msgobj.style.textalign = "center";   
            msgobj.style.lineheight = (msgh-titleheight) + "px";   
            msgobj.style.zindex = "10001";   
      
     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);   
    }   
        salert("系统正在处理......请稍后");     
</script>  
  
</body>  
</HTML>  

 

分享到:
评论

相关推荐

    JS移动端点击弹出遮罩层

    "JS移动端点击弹出遮罩层"这一功能就是一个典型的交互设计,它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层,通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...

    js 弹出遮罩层

    总之,JavaScript弹出遮罩层是一个涉及DOM操作、CSS样式以及可能的HTML内容加载的综合实践。了解并掌握这些技术,能够帮助开发者构建更加丰富和互动的前端应用。在实际开发中,还可以结合现有的库如jQuery、...

    JavaScript弹出遮罩层

    JavaScript弹出遮罩层是一种常见的前端交互设计,用于在网页上创建一个半透明的覆盖层,通常用于显示警告、提示信息或加载等待效果。在这个场景中,我们看到一个经过修改的遮罩层实现,它可以通过链接触发,并指定弹...

    js弹出遮罩层

    在网页设计中,"js弹出遮罩层"是一个常见的功能,它允许用户与特定的交互元素进行互动,而暂时屏蔽掉页面上的其他内容。这种技术可以用于显示警告信息、模态对话框、加载提示或者任何需要用户关注的特殊内容。在...

    JS简单实现点击按钮或文字显示遮罩层的方法

    本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;...

    JS弹出遮罩层

    &lt;title&gt;JS弹出遮罩层 .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 9999; } .modal { position: fixed;...

    JS遮罩层 提示层

    "JS遮罩层 提示层"这个标题所提及的是利用JavaScript技术实现的一种网页交互功能,即在用户界面上创建一个遮罩层或者提示层,通常用于显示重要的消息、警告、选项选择或进行某种操作前的确认。 遮罩层是一种半透明...

    微信判断浏览器自动弹出遮罩层代码

    在开发微信相关的网页应用时,有时我们需要针对微信内置浏览器(X5内核)做一些特定的适配,例如自动弹出遮罩层。这是因为微信浏览器在某些情况下,如打开外部链接时,可能会有自己的行为,比如自动加载微信的分享...

    微信判断浏览器自动弹出遮罩层【完整代码】

    在微信环境中,有时候我们需要针对特定的浏览器行为做出反应,例如防止自动弹出遮罩层。这种情况通常发生在用户打开一个网页链接时,微信内置浏览器为了提供更好的用户体验,可能会自动添加遮罩层来阻止页面的默认...

    lhgdialog弹出层,遮罩层效果源码示例

    "lhgdialog"是一个JavaScript库,专为创建各种类型的弹出层效果而设计,其中包括带或不带遮罩层的窗口,以及具有返回值功能、定位弹出窗口和随滚动条滚动等功能。下面我们将详细探讨这些知识点。 1. 弹出层(Pop-up...

    javascript遮罩层的弹出框

    总的来说,JavaScript遮罩层弹出框是网页交互设计中的一个重要组成部分,它结合了JavaScript的动态性和CSS的视觉表现力,为用户提供了一种有效且灵活的信息提示和交互方式。通过学习和应用这个1.8.2版本的解决方案,...

    微信小程序开发 遮罩层弹出框

    在微信小程序开发中,创建一个遮罩层弹出框是常见的需求,这通常用于实现对话框、加载提示或用户交互反馈等场景。本教程将详细讲解如何在微信小程序中实现这样一个功能。 首先,我们需要理解微信小程序的基本架构。...

    微信浏览器内显示遮罩层提示点击右上角

    同时,监听用户的行为,例如点击遮罩层或特定按钮,可以弹出提示并动态调整遮罩层的显示状态。例如: ```javascript document.addEventListener('DOMContentLoaded', function() { var mask = document....

    遮罩层js代码

    本主题聚焦于"遮罩层js",这是一个基于jQuery和sliphover库实现的JavaScript代码,它允许开发者创建具有多样性和自定义功能的遮罩层。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    各种功能的弹出窗口 带遮罩层/不带带遮罩层

    在IT领域,弹出窗口和遮罩层是用户体验设计中不可或缺的部分。它们广泛应用于网页、应用程序和软件中,用于提供信息、确认用户操作或者展示详细内容。本篇将详细讲解弹出窗口及其与遮罩层的配合使用,以及如何实现...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层&lt;/div&gt; 并随页面...

    微信判断浏览器自动弹出遮罩层【完整代码】.zip

    "微信判断浏览器自动弹出遮罩层【完整代码】.zip"这个压缩包文件提供了一个解决方案,针对微信内置浏览器打开网页时自动弹出遮罩层,引导用户跳转到系统浏览器以获得更好的浏览体验。这个功能主要涉及以下几个技术点...

    html弹出框+遮罩层

    利用CSS3的`transition`和`animation`属性,我们可以添加动态效果,如淡入淡出、滑动等,使弹出框和遮罩层的出现更加吸引人。 6. 响应式设计: 在现代网页设计中,弹出框和遮罩层应具有响应式布局,以适应不同...

    遮罩层 javascript js 数据提交

    "遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层,并在用户点击提交按钮时,利用JavaScript处理数据提交的过程。在此过程中,遮罩层的出现和消失以及提交操作的执行,都是通过...

Global site tag (gtag.js) - Google Analytics