教程集 > 脚本编程 > javascript > 正文网页中弹出小窗口,页面背景逐渐变为半透明

网页中弹出小窗口,页面背景逐渐变为半透明

发布时间：2023-05-29 编辑：jiaochengji.com

教程集为您提供网页中弹出小窗口,页面背景逐渐变为半透明等资源，欢迎您收藏本站，我们将为您提供最新的网页中弹出小窗口,页面背景逐渐变为半透明资源

提示：您可以先修改部分代码再运行

网页中弹出小窗口,页面背景逐渐变为半透明  <!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">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>无标题文档</title>  <head>  <title>网页中弹出小窗口,页面背景逐渐变为半透明</title>  <style>  html,body{font-size:12px;margin:0px;height:100%;}  .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;}  .mesWindowContent{margin:4px;font-size:12px;}  .mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  </style>  <script>  var isIe=(document.all)?true:false;  //设置select的可见状态  function setSelectState(state)  {  var objl=document.getElementsByTagName('select');  for(var i=0;i<objl.length;i  )  {  objl[i].style.visibility=state;  }  }  function mousePosition(ev)  {  if(ev.pageX || ev.pageY)  {  return {x:ev.pageX, y:ev.pageY};  }  return {  x:ev.clientX   document.body.scrollLeft - document.body.clientLeft,y:ev.clientY   document.body.scrollTop - document.body.clientTop  };  }  //弹出方法  function showMessageBox(wTitle,content,pos,wWidth)  {  closeWindow();  var bWidth=parseInt(document.documentElement.scrollWidth);  var bHeight=parseInt(document.documentElement.scrollHeight);  if(isIe){  setSelectState('hidden');}  var back=document.createElement("div");  back.id="back";  var styleStr="top:0px;left:0px;position:absolute;background:#666;width:" bWidth "px;height:" bHeight "px;";  styleStr =(isIe)?"filter:alpha(opacity=0);":"opacity:0;";  back.style.cssText=styleStr;  document.body.appendChild(back);  showBackground(back,50);  var mesW=document.createElement("div");  mesW.id="mesWindow";  mesW.className="mesWindow";  mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>" wTitle "</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>" content "</div><div class='mesWindowBottom'></div>";  styleStr="left:" (((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x) "px;top:50px;position:absolute;width:" wWidth "px;";  mesW.style.cssText=styleStr;  document.body.appendChild(mesW);  }  //让背景渐渐变暗  function showBackground(obj,endInt)  {  if(isIe)  {  obj.filters.alpha.opacity =1;  if(obj.filters.alpha.opacity<endInt)  {  setTimeout(function(){showBackground(obj,endInt)},5);  }  }else{  var al=parseFloat(obj.style.opacity);al =0.01;  obj.style.opacity=al;  if(al<(endInt/100))  {setTimeout(function(){showBackground(obj,endInt)},5);}  }  }  //关闭窗口  function closeWindow()  {  if(document.getElementById('back')!=null)  {  document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  }  if(document.getElementById('mesWindow')!=null)  {  document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  }  if(isIe){  setSelectState('');}  }  //测试弹出  function testMessageBox(ev)  {  var objPos = mousePosition(ev);  messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";  showMessageBox('请选择以下地区',messContent,objPos,350);  }  </script>  </head>  <body>  <div style="text-align:left">弹出窗口</div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
网页中弹出小窗口,页面背景逐渐变为半透明
 网易佳人有约登录效果
 网页特效之让css使网页图片半透明
 Jquery弹出窗口插件 LeanModal的使用方法
 jQuery 打造动态渐变按钮详细图文教程
 jQuery的弹窗插件 wBox
CSS3 - 设置渐变颜色背景，线性/放射性/循环（附在线渐变生成工具）
ps制作vista水晶效果教程
 网页特效-屏幕振动代码
 实例技巧文章：网页效果7条

上一篇：js 全选代码下一篇：js 给table增加下拉滚动条

[关闭]

网页中弹出小窗口,页面背景逐渐变为半透明

最近更新

浏览排行