cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kaedah JavaScript untuk merealisasikan mengklik butang untuk muncul tetingkap lapisan yang boleh ditutup dan menjadikan latar belakang halaman web kemahiran gray_javascript

Kaedah JavaScript untuk merealisasikan mengklik butang untuk muncul tetingkap lapisan yang boleh ditutup dan menjadikan latar belakang halaman web kemahiran gray_javascript

WBOY
WBOYasal
2016-05-16 15:59:191703semak imbas

Contoh dalam artikel ini menerangkan kaedah JavaScript untuk mengklik butang untuk muncul tetingkap lapisan boleh ditutup dan latar belakang halaman web menjadi kelabu. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Selepas mengklik butang di sini, tetingkap lapisan boleh ditutup muncul, dan kemudian latar belakang halaman web menjadi kelabu Anda sering dapat melihat kesan log masuk QQ pada tapak web QQ, yang hampir sama dengan coretan kod ini adalah berdasarkan JavaScript Menurut anda Dalam beberapa kes, fungsi ini kadangkala dicapai menggunakan CSS. 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出一个层，页面变灰</title>
<script language="javascript">
function alertWin(title, msg, w, h){ 
 var titleheight = "23px"; // 窗口标题高度 
 var bordercolor = "#336699"; // 提示窗口的边框颜色 
 var titlecolor = "#FFFFFF"; // 窗口标题颜色 
 var titlebgcolor = "#336699"; // 窗口标题背景色
 var bgcolor = "#FFFFFF"; // 提示内容的背景色
 var iWidth = document.documentElement.clientWidth; 
 var iHeight = document.documentElement.clientHeight; 
 var bgObj = document.createElement("div"); 
 bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
 document.body.appendChild(bgObj); 
 var msgObj=document.createElement("div");
 msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
 document.body.appendChild(msgObj);
 var table = document.createElement("table");
 msgObj.appendChild(table);
 table.style.cssText = "margin:0px;border:0px;padding:0px;";
 table.cellSpacing = 0;
 var tr = table.insertRow(-1);
 var titleBar = tr.insertCell(-1);
 titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
 titleBar.style.paddingLeft = "10px";
 titleBar.innerHTML = title;
 var moveX = 0;
 var moveY = 0;
 var moveTop = 0;
 var moveLeft = 0;
 var moveable = false;
 var docMouseMoveEvent = document.onmousemove;
 var docMouseUpEvent = document.onmouseup;
 titleBar.onmousedown = function() {
  var evt = getEvent();
  moveable = true; 
  moveX = evt.clientX;
  moveY = evt.clientY;
  moveTop = parseInt(msgObj.style.top);
  moveLeft = parseInt(msgObj.style.left);  
  document.onmousemove = function() {
   if (moveable) {
    var evt = getEvent();
    var x = moveLeft + evt.clientX - moveX;
    var y = moveTop + evt.clientY - moveY;
    if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
     msgObj.style.left = x + "px";
     msgObj.style.top = y + "px";
    }
   } 
  };
  document.onmouseup = function () { 
   if (moveable) { 
    document.onmousemove = docMouseMoveEvent;
    document.onmouseup = docMouseUpEvent;
    moveable = false; 
    moveX = 0;
    moveY = 0;
    moveTop = 0;
    moveLeft = 0;
   } 
  };
 }
 var closeBtn = tr.insertCell(-1);
 closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
 closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
 closeBtn.onclick = function(){ 
  document.body.removeChild(bgObj); 
  document.body.removeChild(msgObj); 
 } 
 var msgBox = table.insertRow(-1).insertCell(-1);
 msgBox.style.cssText = "font:10pt '宋体';";
 msgBox.colSpan = 2;
 msgBox.innerHTML = msg;
  // 获得Event对象，用于兼容IE和FireFox
  function getEvent() {
   return window.event || arguments.callee.caller.arguments[0];
  }
} 
</script>
</head>
<body>
<input type="button" value="点这里" 
onclick="alertWin('点击弹出可关闭的层窗口，网页变灰',290,208);" />
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Konsep asas dan pengaturcaraan lanjutan jQuery_jqueryArtikel seterusnya：Konsep asas dan pengaturcaraan lanjutan jQuery_jquery

Artikel berkaitan

Lihat lagi