点击按钮实现遮罩效果

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量1.4k 收藏
点赞数
分类专栏： AJAX 文章标签： javascript generator function html div button

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
<script type="text/javascript" language="javascript">
//more javascript from http://www.smallrain.net
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;

var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
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 ="25px";
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.οnclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
window.location.reload();
window.location="#";
c.innerText="aaaaaaaaaa";
}
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>
 <input type="button" value="点击这里" οnclick="sAlert('test弹窗效果3243');" />              //在按钮中添加事件
 <div id="c"></div>

 </BODY>
</HTML>
 

rigger21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1514
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
C#生成一种遮罩图像效果
09-14
C#生成一种遮罩图像效果 利用C#生成一种遮罩图像效果，图像被一个遮罩层挡住，然后由两边向中间显示，最终显示出图像，主要功能是为显示图像增加动态效果，避免单调死板，也希望通过这个小例子，让大家明白一些C#有关的图像遮罩效果。
实现弹出窗口(js+ajax)
xtyni129的专栏
07-16 4538
点击按钮后会覆盖页面，然后弹出一个窗口，很多网站都用了这种效果。//more javascript from http://www.smallrain.netfunction sAlert(str){var msgw,msgh,bordercolor;msgw=400;//提示窗口的宽度msgh=100;//提示窗口的高度titleheight=25 //提示窗口标题高度bordercolor
vue项目通过点击按钮给页面加上遮罩层效果
m0_57005111的博客
07-13 2032
通过按钮点击控制遮罩层的显示与隐藏
JS弹出的半透明层
指尖
09-27 131
&lt;style&gt; .mesWindow{border:#666 1px solid;background:#fff;} .mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;} .mesWindowC...
js点击按钮实现带遮罩层的弹出视频效果
10-23
主要介绍了js点击按钮实现带遮罩层的弹出视频效果,需要的朋友可以参考下
JS简单实现点击按钮或文字显示遮罩层的方法
12-10
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考，具体如下： 运行效果图如下： 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
10-22
主要介绍了jQuery实现按钮点击遮罩加载及处理完后恢复的效果,涉及jQuery与asp.net后台交互实现页面效果动态变换的相关技巧,需要的朋友可以参考下
js弹出遮罩层
weixin_30872867的博客
05-04 84
html代码： View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm...
jquery框架 用户弹出框 ajax请求(仿新浪用户信息弹出框)
10-07
jquery框架 用户弹出框 ajax请求(仿新浪用户信息弹出框)
前端弹出对话框 js实现ajax交互
11-23
原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。 代码还有些毛躁，提供大概实现逻辑。  实现思路：在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用ajax方式。 出发弹窗事件用onclick.  关键细节：弹窗和原窗体本质是同页面，为了描述方便，姑且称底层窗体为父窗体，弹窗为子窗体。为了实现字父窗体的交互，需要在父窗体中做一些特别标签，以便选择器选择，并操作插入新的dom对象。 如此，首先看下父窗体的代码，关键部分我是有注释的。  <html xmlns
vue.js和css结合实现弹框居中以及背景半透明
闷闷闷闷闷小菇的博客
07-17 4535
本文中要实现的是点击注册按钮弹出一个注册信息框，要求弹框居中，且背景透明 效果： 1.vue.js中的template部分代码（html中的body部分） 其中第一个div模块为要点击的模块，第二个div模块是为了实现背景半透明的背景模块，第三个div模块为点击后出现的居中的注册信息模块。 <div class="login"> <span class="loginS" ...
遮罩（让按钮在一次请求执行完才能再次请求）
夜一
10-15 262
用到提交按钮时，有时候代码运行比较慢，如果重复点提交，可能重复请求会导致不理想的情况，为避免重复的请求以致出现问题，需要用着遮罩，达到只进行一次提交请求 效果： JSP： <a class="btn" href="javascript:void(0);" id="submit">提交</a> <div class="lately-buy hideview...
在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层 ----JAVA
huorngkai的博客
05-11 4847
在项目中可能会有一些数据量较大的信息作提交，添加，修改等操作等待时间较长， 这样就会有需求就是提示一下，给用户更好的体验感 使用到的技术：thymeleaf 也可不使用thymeleaf，在文章中代码把相关的信息删除就可以 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 这个地方先看html中的代码片段 有一个submit按钮做提交操作 下边是引入一个loading图片，显示在遮罩层
遮罩和锁定按钮
苏凯的博客
07-30 544
在项目中有很多地方会用到遮罩和按钮锁定，我这边直接上代码了，直接拷贝用就行了； 一.遮罩 需要注意的是这几个参数的意思：RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 &lt;div id="zhezhao"  style="background-color:rgba(90, 90, 90, 0.1);po...
一个小时学习javaScript
weixin_43064364的博客
04-20 926
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 582
官网代码（在取消选中状态的时候不生效）
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 998
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue3 中 点击按钮 弹出遮罩层的写法
04-02
在 Vue3 中，可以使用 Teleport（传送门）组件来实现弹出遮罩层的效果。具体步骤如下： 1. 在模板中添加 Teleport 组件，将弹出层内容放在 Teleport 组件内部，并指定目标容器。例如： ```html 点击弹出层 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值