管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript 点击页面上的按纽，弹出层，背景变灰

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>点击页面上的按纽，弹出一个层，背景变灰</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2FnewDiv.js%22%3E%3C%2Fscript%3E"> 
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " /> 
</head> 
<body> 
<p >点击页面上的按纽，弹出一个层，背景变灰</p> 
<input type= "button" onclick= " sAlert( '测试效果  嗯！效果还不错！ '); " value="点击这里 " /> 
<input type="button" id="btn" value="test" /> 
</body> 
</html>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0Afunction%20sAlert(str)%20%0D%0A%7B%20%0D%0Avar%20msgw%2Cmsgh%2Cbordercolor%3B%20%0D%0Amsgw%3D400%3B%2F%2F%E6%8F%90%E7%A4%BA%E7%AA%97%E5%8F%A3%E7%9A%84%E5%AE%BD%E5%BA%A6%20%0D%0Amsgh%3D100%3B%2F%2F%E6%8F%90%E7%A4%BA%E7%AA%97%E5%8F%A3%E7%9A%84%E9%AB%98%E5%BA%A6%20%0D%0Atitleheight%3D25%20%2F%2F%E6%8F%90%E7%A4%BA%E7%AA%97%E5%8F%A3%E6%A0%87%E9%A2%98%E9%AB%98%E5%BA%A6%20%0D%0Abordercolor%3D%20%22%23336699%20%22%3B%2F%2F%E6%8F%90%E7%A4%BA%E7%AA%97%E5%8F%A3%E7%9A%84%E8%BE%B9%E6%A1%86%E9%A2%9C%E8%89%B2%20%0D%0Atitlecolor%3D%20%22%2399CCFF%20%22%3B%2F%2F%E6%8F%90%E7%A4%BA%E7%AA%97%E5%8F%A3%E7%9A%84%E6%A0%87%E9%A2%98%E9%A2%9C%E8%89%B2%20%0D%0A%0D%0Avar%20sWidth%2CsHeight%3B%20%0D%0AsWidth%3Ddocument.body.offsetWidth%3B%2F%2F%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E4%BD%9C%E5%8C%BA%E5%9F%9F%E5%86%85%E9%A1%B5%E9%9D%A2%E5%AE%BD%E5%BA%A6%20%0D%0AsHeight%3Dscreen.height%3B%2F%2F%E5%B1%8F%E5%B9%95%E9%AB%98%E5%BA%A6%EF%BC%88%E5%9E%82%E7%9B%B4%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%89%20%0D%0A%0D%0A%0D%0A%2F%2F%E8%83%8C%E6%99%AF%E5%B1%82%EF%BC%88%E5%A4%A7%E5%B0%8F%E4%B8%8E%E7%AA%97%E5%8F%A3%E6%9C%89%E6%95%88%E5%8C%BA%E5%9F%9F%E7%9B%B8%E5%90%8C%EF%BC%8C%E5%8D%B3%E5%BD%93%E5%BC%B9%E5%87%BA%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%97%B6%EF%BC%8C%E8%83%8C%E6%99%AF%E6%98%BE%E7%A4%BA%E4%B8%BA%E6%94%BE%E5%B0%84%E7%8A%B6%E9%80%8F%E6%98%8E%E7%81%B0%E8%89%B2%EF%BC%89%20%0D%0Avar%20bgObj%3Ddocument.createElement(%20%22div%20%22)%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAdiv%E5%AF%B9%E8%B1%A1%EF%BC%88%E8%83%8C%E6%99%AF%E5%B1%82%EF%BC%89%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89div%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8D%B3%E7%9B%B8%E5%BD%93%E4%BA%8E%20%0D%0A%2F%2F%20%3Cdiv%20id%3D%20%22bgDiv%20%22%20style%3D%20%22position%3Aabsolute%3B%20top%3A0%3B%20background-color%3A%23777%3B%20filter%3Aprogid%3ADXImagesTransform.Microsoft.Alpha(style%3D3%2Copacity%3D25%2CfinishOpacity%3D75)%3B%20opacity%3A0.6%3B%20left%3A0%3B%20width%3A918px%3B%20height%3A768px%3B%20z-index%3A10000%3B%20%22%3E%20%3C%2Fdiv%3E%20%0D%0AbgObj.setAttribute(%20'id%20'%2C%20'bgDiv%20')%3B%20%0D%0AbgObj.style.position%3D%22absolute%22%3B%20%0D%0AbgObj.style.top%3D%20%220%22%3B%20%0D%0AbgObj.style.background%3D%20%22%23777%20%22%3B%20%0D%0AbgObj.style.filter%3D%20%22progid%3ADXImageTransform.Microsoft.Alpha(style%3D3%2Copacity%3D25%2CfinishOpacity%3D75%20%22%3B%20%0D%0AbgObj.style.opacity%3D%20%220.6%22%3B%20%0D%0AbgObj.style.left%3D%20%220%22%3B%20%0D%0AbgObj.style.width%3DsWidth%20%2B%20%22px%22%3B%20%0D%0AbgObj.style.height%3DsHeight%20%2B%20%22px%22%3B%20%0D%0AbgObj.style.zIndex%20%3D%20%2210000%22%3B%20%0D%0Adocument.body.appendChild(bgObj)%3B%2F%2F%E5%9C%A8body%E5%86%85%E6%B7%BB%E5%8A%A0%E8%AF%A5div%E5%AF%B9%E8%B1%A1%20%0D%0A%0D%0A%0D%0Avar%20msgObj%3Ddocument.createElement(%20%22div%22)%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAdiv%E5%AF%B9%E8%B1%A1%EF%BC%88%E6%8F%90%E7%A4%BA%E6%A1%86%E5%B1%82%EF%BC%89%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89div%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8D%B3%E7%9B%B8%E5%BD%93%E4%BA%8E%20%0D%0A%2F%2F%3Cdiv%20id%3D%20%22msgDiv%20%22%20align%3D%20%22center%20%22%20style%3D%20%22background-color%3Awhite%3B%20border%3A1px%20solid%20%23336699%3B%20position%3Aabsolute%3B%20left%3A50%25%3B%20top%3A50%25%3B%20font%3A12px%2F1.6em%20Verdana%2CGeneva%2CArial%2CHelvetica%2Csans-serif%3B%20margin-left%3A-225px%3B%20margin-top%3Anpx%3B%20width%3A400px%3B%20height%3A100px%3B%20text-align%3Acenter%3B%20line-height%3A25px%3B%20z-index%3A100001%3B%20%22%3E%20%3C%2Fdiv%3E%20%0D%0AmsgObj.setAttribute(%20%22id%22%2C%20%22msgDiv%22)%3B%20%0D%0AmsgObj.setAttribute(%20%22align%22%2C%20%22center%22)%3B%20%0D%0AmsgObj.style.background%3D%20%22white%20%22%3B%20%0D%0AmsgObj.style.border%3D%20%221px%20solid%20%22%20%3B%20%0D%0AmsgObj.style.position%20%3D%20%22absolute%22%3B%20%0D%0AmsgObj.style.left%20%3D%20%2250%25%22%3B%20%0D%0AmsgObj.style.top%20%3D%20%2250%25%22%3B%20%0D%0AmsgObj.style.font%3D%20%2212px%2F1.6em%20Verdana%2C%20Geneva%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3B%20%0D%0AmsgObj.style.marginLeft%20%3D%20%22-225px%22%20%3B%20%0D%0AmsgObj.style.marginTop%20%3D%20-75%2Bdocument.documentElement.scrollTop%2B%20%22px%22%3B%20%0D%0AmsgObj.style.width%20%3D%20msgw%20%2B%20%22px%22%3B%20%0D%0AmsgObj.style.height%20%3Dmsgh%20%2B%20%22px%22%3B%20%0D%0AmsgObj.style.textAlign%20%3D%20%22center%22%3B%20%0D%0AmsgObj.style.lineHeight%20%3D%20%2225px%22%3B%20%0D%0AmsgObj.style.zIndex%20%3D%20%2210001%22%3B%20%0D%0A%0D%0Avar%20title%3Ddocument.createElement(%20%22h4%22)%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAh4%E5%AF%B9%E8%B1%A1%EF%BC%88%E6%8F%90%E7%A4%BA%E6%A1%86%E6%A0%87%E9%A2%98%E6%A0%8F%EF%BC%89%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89h4%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8D%B3%E7%9B%B8%E5%BD%93%E4%BA%8E%20%0D%0A%2F%2F%20%3Ch4%20id%3D%20%22msgTitle%20%22%20align%3D%20%22right%20%22%20style%3D%20%22margin%3A0%3B%20padding%3A3px%3B%20background-color%3A%23336699%3B%20filter%3Aprogid%3ADXImageTransform.Microsoft.Alpha(startX%3D20%2C%20startY%3D20%2C%20finishX%3D100%2C%20finishY%3D100%2Cstyle%3D1%2Copacity%3D75%2CfinishOpacity%3D100)%3B%20opacity%3A0.75%3B%20border%3A1px%20solid%20%23336699%3B%20height%3A18px%3B%20font%3A12px%20Verdana%2CGeneva%2CArial%2CHelvetica%2Csans-serif%3B%20color%3Awhite%3B%20cursor%3Apointer%3B%20%22%20onclick%3D%20%22%20%22%3E%20%E5%85%B3%E9%97%AD%20%3C%2Fh4%3E%20%0D%0Atitle.setAttribute(%20%22id%22%2C%20%22msgTitle%22)%3B%20%0D%0Atitle.setAttribute(%20%22align%22%2C%20%22right%22)%3B%20%0D%0Atitle.style.margin%3D%20%220%22%3B%20%0D%0Atitle.style.padding%3D%20%223px%22%3B%20%0D%0Atitle.style.background%3Dbordercolor%3B%20%0D%0Atitle.style.filter%3D%20%22progid%3ADXImageTransform.Microsoft.Alpha(startX%3D20%2C%20startY%3D20%2C%20finishX%3D100%2C%20finishY%3D100%2Cstyle%3D1%2Copacity%3D75%2CfinishOpacity%3D100)%3B%22%3B%20%0D%0Atitle.style.opacity%3D%20%220.75%20%22%3B%20%0D%0Atitle.style.border%3D%20%221px%20solid%22%20%3B%20%0D%0Atitle.style.height%3D%20%2218px%20%22%3B%20%0D%0Atitle.style.font%3D%20%2212px%20Verdana%2C%20Geneva%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3B%20%0D%0Atitle.style.color%3D%20%22white%22%3B%20%0D%0Atitle.style.cursor%3D%20%22pointer%22%3B%20%0D%0Atitle.innerHTML%3D%20%22%E5%85%B3%E9%97%AD%22%3B%20%0D%0Atitle.onclick%3DremoveObj%3B%20%0D%0A%0D%0Avar%20button%3Ddocument.createElement(%20%22input%22)%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAinput%E5%AF%B9%E8%B1%A1%EF%BC%88%E6%8F%90%E7%A4%BA%E6%A1%86%E6%8C%89%E9%92%AE%EF%BC%89%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89input%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8D%B3%E7%9B%B8%E5%BD%93%E4%BA%8E%20%0D%0A%2F%2F%20%3Cinput%20type%3D%20%22button%20%22%20align%3D%20%22center%20%22%20style%3D%20%22width%3A100px%3B%20align%3Acenter%3B%20margin-left%3A250px%3B%20margin-bottom%3A10px%3B%20%22%20value%3D%20%22%E5%85%B3%E9%97%AD%20%22%3E%20%0D%0Abutton.setAttribute(%20%22type%22%2C%20%22button%22)%3B%20%0D%0Abutton.setAttribute(%20%22value%22%2C%20%22%E5%85%B3%E9%97%AD%22)%3B%20%0D%0Abutton.style.width%3D%20%2260px%22%3B%20%0D%0Abutton.style.align%3D%20%22center%22%3B%20%0D%0Abutton.style.marginLeft%3D%20%22250px%22%3B%20%0D%0Abutton.style.marginBottom%3D%20%2210px%22%3B%20%0D%0Abutton.style.background%3Dbordercolor%3B%20%0D%0Abutton.style.border%3D%20%221px%20solid%22%3B%20%0D%0Abutton.style.color%3D%20%22white%22%3B%20%0D%0Abutton.onclick%3DremoveObj%3B%20%0D%0A%0D%0Afunction%20removeObj()%20%0D%0A%7B%2F%2F%E7%82%B9%E5%87%BB%E6%A0%87%E9%A2%98%E6%A0%8F%E8%A7%A6%E5%8F%91%E7%9A%84%E4%BA%8B%E4%BB%B6%20%0D%0Adocument.body.removeChild(bgObj)%3B%2F%2F%E5%88%A0%E9%99%A4%E8%83%8C%E6%99%AF%E5%B1%82Div%20%0D%0Adocument.getElementById(%20%22msgDiv%22).removeChild(title)%3B%2F%2F%E5%88%A0%E9%99%A4%E6%8F%90%E7%A4%BA%E6%A1%86%E7%9A%84%E6%A0%87%E9%A2%98%E6%A0%8F%20%0D%0Adocument.body.removeChild(msgObj)%3B%2F%2F%E5%88%A0%E9%99%A4%E6%8F%90%E7%A4%BA%E6%A1%86%E5%B1%82%20%0D%0A%7D%20%0D%0Adocument.body.appendChild(msgObj)%3B%2F%2F%E5%9C%A8body%E5%86%85%E6%B7%BB%E5%8A%A0%E6%8F%90%E7%A4%BA%E6%A1%86div%E5%AF%B9%E8%B1%A1msgObj%20%0D%0Adocument.getElementById(%20%22msgDiv%22).appendChild(title)%3B%2F%2F%E5%9C%A8%E6%8F%90%E7%A4%BA%E6%A1%86div%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%A0%87%E9%A2%98%E6%A0%8F%E5%AF%B9%E8%B1%A1title%20%0D%0A%0D%0Avar%20txt%3Ddocument.createElement(%20%22p%22)%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAp%E5%AF%B9%E8%B1%A1%EF%BC%88%E6%8F%90%E7%A4%BA%E6%A1%86%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%EF%BC%89%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89p%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8D%B3%E7%9B%B8%E5%BD%93%E4%BA%8E%20%0D%0A%2F%2F%20%3Cp%20style%3D%20%22margin%3A1em%200%3B%20%22%20id%3D%20%22msgTxt%20%22%3E%20%E6%B5%8B%E8%AF%95%E6%95%88%E6%9E%9C%20%3C%2Fp%3E%20%0D%0Atxt.style.margin%3D%20%221em%200%22%20%0D%0Atxt.setAttribute(%20%22id%20%22%2C%20%22msgTxt%22)%3B%20%0D%0Atxt.innerHTML%3Dstr%3B%2F%2F%E6%9D%A5%E6%BA%90%E4%BA%8E%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E6%97%B6%E7%9A%84%E5%8F%82%E6%95%B0%E5%80%BC%20%0D%0Adocument.getElementById(%20%22msgDiv%22).appendChild(txt)%3B%2F%2F%E5%9C%A8%E6%8F%90%E7%A4%BA%E6%A1%86div%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%E5%AF%B9%E8%B1%A1txt%20%0D%0Adocument.getElementById(%20%22msgDiv%22).appendChild(button)%3B%2F%2F%E5%9C%A8%E6%8F%90%E7%A4%BA%E6%A1%86div%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%8C%89%E9%92%AE%E5%AF%B9%E8%B1%A1button%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　注意style.position和style.zIndex两属性。

教程首页更多教程