点击按钮Alert弹出遮罩层效果的提示框代码

最新推荐文章于 2022-04-28 21:18:25 发布
最新推荐文章于 2022-04-28 21:18:25 发布
阅读量1.6k 收藏 1
点赞数

点击按钮Alert弹出遮罩层效果的提示框代码，改善优化的Alert弹出提示效果，类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的BUG。使用方法很简单，在需要弹出提示的页面调用即可，示例中有方法。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>经过改善优化的Alert弹出提示效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<div class="cecmbody" id="cecmpolicy">
<div class="leftClass">
<p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<input type="button" value="点击这里" οnclick="sAlert('测试效果');" />
</div>
<div class="rightClass">
</div>
</div>
<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-27
//Email:jxdawei@gmail.com
//Demo:http://www.veryhuo.com/a/view/38279.html
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=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 ="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);
}
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>
</body>
</html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

nanjing0412
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
alert遮罩层显示内容
12-04
alert遮罩层显示内容
使用Javascript创建遮罩层并模拟Alert、Confirm对话框
weixin_30591551的博客
09-26 102
在web页面中你不觉得Alert很单调吗？你不觉得Confirm的风格太过于死板了吗？ 该示例代码主要使用javascript的DOM操作，先创建了遮罩层，用于阻止用户对页面元素的操作，然后在遮罩层之上再建立模拟效果的对话框。原理就是这么简单，有兴趣的话还可以在此基础上进行扩充，让模拟出来的Alert支持类似模态对话框或内嵌控件的基本操作。 该示例的脚本已对遮罩层和对话框层建立了储存栈，所以支...
元素的显示、隐藏、遮罩
无糖加冰
11-20 440
元素的显示、隐藏、遮罩 今天我们来讲元素的显示隐藏和遮罩,隐藏顾名思义就是我们可以通过一些方法将元素先隐藏起来,等到需要使用的时候,我们在将元素显示出来,这就是元素的隐藏,其中遮罩是最最经典的案例. display display属性除了可以把一个元素转化为行内元素，块元素和行内块元素以外还可以设置一个元素的显示和隐藏 display: none;元素显示隐藏但是不会保留原来的位置 display:block;转换为块元素以后，元素会显示出来,此元素前后会带有换行符。 案例: <!DOCTYPE
control层alert弹出框乱码_Axure9原型教程：Axure实现弹框、弹出窗口（警告，提示）...
weixin_39860919的博客
11-27 398
今天我们要讲的是如何用axure做出弹出框的效果，不限于当前窗口所弹出的提示、警告、带 遮罩层的弹窗等，可以参考本教程，实用性非常强，应用的场景比较多。如果还是不会，可下载参考原型，如果还是不会，私我私我私我~链接：https://pan.baidu.com/s/1HYaih-LeWYKaoRijmO6T8Q 提取码：pgbb 想象一下场景，无论web端还是移动端，点击某个提交按钮，系统会提示是否...
解决消息通知被el-dialog对话框的遮挡的问题($message、$alert、$notify、$confirm)
dingdingdandan
04-28 933
文章目录1. 原因分析2. 完美解决3. 效果 1. 原因分析 出现这种情况的原因是因为消息弹窗的层级z-index比对话框低导致的，消息弹窗的z-index一般在2001，而对话框的z-index在3000左右。 解决思路很简单，我们只要把对话框的z-index降低即可，让它显示在消息弹窗下面，所以我们只要把对话框的z-index设为1000左右即可,但不要太低，以免对话框被覆盖。 2. 完美解决 直接在对话框上加 :z-index="1000" 3. 效果 ...
第三章 警告（alert 消息对话框）
闽南土著
04-27 418
警告（alert 消息对话框）   我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。 如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。 语法: alert(字符串或变量);  看下面的代码:    var mynum = 30;    alert("hello!");    alert(mynum); 备注：
element UI【解决方案】消息弹框被对话框遮挡（$message消息框被dialog或$alert遮罩）
朝阳39的博客
01-27 3129
问题描述 同时弹出消息弹框和对话框时，消息弹框被对话框遮挡 问题原因 element UI默认给$message消息弹框动态添加的z-index值比对话框小 解决方案 给 $message 添加自定义样式 this.$message({ message: "我是消息", customClass: "myMessageClass" }); 划重点：必须是全局style，不能有scoped <style > /* 必须是全局style，不能有scoped */ .myMessageC.
点击按钮弹出表单对话框带透明遮罩
热门推荐
谦虚使人发胖的博客
12-07 1万+
使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 form 标记，设置 modal 选项为 true，并通过 buttons 选项来指定主要的和次要的用户动作 1. 按钮 2. 用于显示弹窗窗口的div 名称： 3. 使用 Jquery设置 function aa() { $(function() { var name1 = $("#n
html+css源码之实现登录弹出框遮罩层效果
weixin_34252686的博客
10-09 705
在web开发中，很多网站都做了一些特别炫丽的效果，比如用户登录弹框遮罩层效果，本文章向大家介绍css如何实现登录弹出框遮罩层效果，需要的朋友可以参考一下本文章的源代码。 html+css实现登录弹出框遮罩层效果,源代码如下： <!DOCTYPE html> <html> <head> <style type='text/css'> #l...
自定义遮罩和Alert弹出框样式
10-31
可以自己定义遮罩层的样式和Alert弹出框的样式
弹框 遮罩层 alert提示 样式
01-03
好看的 弹框 遮罩层 alert 刷心样式 的
Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码
10-14
主要介绍了Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
JavaScript基础教程之alert弹出提示框实例
10-25
主要介绍了JavaScript基础教程之alert弹出提示框实例,本文重点在于讲解了JavaScript基本语法、基本使用方法,需要的朋友可以参考下
jQuery实现点击按钮弹出可关闭层的浮动层插件
11-23
本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件。分享给大家供大家参考。具体如下： 这是一款由漫画Jquery弹出层插件改编而来，小鸟Js弹窗插件，按ESC可以关闭窗口。默认不带样式，大家可以根据自己的...
大气绿色jQuery弹出框弹出层特效代码.zip
07-11
实现效果： ...大气绿色jQuery弹出框弹出层特效代码，支持三种弹出对话框模式，即提示信息、confirm确认、 alert提示三种弹框模式，特效代码基于jQuery实现，很不错的对话框，相比ArtDialog功能弱了点。效。
alert.js弹出层插件下载特效代码
03-20
alert.js弹出层插件下载是一款基于jQuery开发的PC移动端都兼容的轻量级弹层组件。
神经网络与量子计算的交叉研究.pptx
04-19
神经网络与量子计算的交叉研究.pptx
非线性端口 MEMS 麦克风的 Simscape 模型.zip
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
用于超声成像和仿真的 MATLAB 工具箱.zip
最新发布
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
js点击按钮弹出提示框
09-26
其中，confirm()函数会弹出一个带有确定和取消按钮的确认框，alert()函数会弹出一个警告框，而prompt()函数会弹出一个提示框，可以用于接收用户的输入。 在这个例子中，当点击按钮时，会调用myconfirm()函数，该...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值