点击按钮弹出粉红色提示层背景颜色变灰

6个月前 (05-22 17:00)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

网站常用点击按钮后弹出一个提示层特效,整个网页的背景颜色全部变灰,无法操作,可根据自己的需求来自定义样式。

<!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/xhtml" xml:lang="zh-CN">
<head>
<meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>点击按钮弹出粉红色提示层背景颜色变灰_武鸣人</title>
<style type="text/css">
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="cecmpolicy">
 <div>
 <input type="button" value="点击这里" onclick="sAlert('武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢。',this);" />
<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><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
</div>
<div>
</div>
</div>
<script type="text/javascript" language="javascript">
 function sAlert(txt){
 var eSrc=(document.all)?window.event.srcElement:arguments[1];
 var shield = document.createElement("DIV");
 shield.id = "shield";
 shield.style.position = "absolute";
 shield.style.left = "0px";
 shield.style.top = "0px";
 shield.style.width = "100%";
 shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 shield.style.background = "#333";
 shield.style.textAlign = "center";
 shield.style.zIndex = "10000";
 shield.style.filter = "alpha(opacity=0)";
 shield.style.opacity = 0;
 var alertFram = document.createElement("DIV");
 alertFram.id="alertFram";
 alertFram.style.position = "absolute";
 alertFram.style.left = "50%";
 alertFram.style.top = "50%";
 alertFram.style.marginLeft = "-225px" ;
 alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
 alertFram.style.width = "450px";
 alertFram.style.height = "150px";
 alertFram.style.background = "#ccc";
 alertFram.style.textAlign = "center";
 alertFram.style.lineHeight = "150px";
 alertFram.style.zIndex = "10001";
 strHtml  = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
 strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[系统提示]</li>\n";
 strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";
 strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
 strHtml += "</ul>\n";
 alertFram.innerHTML = strHtml;
 document.body.appendChild(alertFram);
 document.body.appendChild(shield);
 this.setOpacity = function(obj,opacity){
  if(opacity>=1)opacity=opacity/100;
  try{ obj.style.opacity=opacity; }catch(e){}
  try{
   if(obj.filters.length>0&&obj.filters("alpha")){
    obj.filters("alpha").opacity=opacity*100;
   }else{
    obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
   }
  }catch(e){}
 }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 var c = 0;
 this.doAlpha = function(){
  if (++c > 20){clearInterval(ad);return 0;}
  setOpacity(shield,c);
 }
 var ad = setInterval("doAlpha()",1);
 this.doOk = function(){
  //alertFram.style.display = "none";
  //shield.style.display = "none";
  document.body.removeChild(alertFram);
  document.body.removeChild(shield);
  eSrc.focus();
  document.body.onselectstart = function(){return true;}
  document.body.oncontextmenu = function(){return true;}
 }
 document.getElementById("do_OK").focus();
 eSrc.blur();
 document.body.onselectstart = function(){return false;}
 document.body.oncontextmenu = function(){return false;}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
  </script>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/1048.html

回帖

点击按钮弹出粉红色提示层背景颜色变灰 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息