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

模拟弹出窗口效果，关闭层之前，不能选择后面的页内容

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%3E%20%0D%0A%2F%2Fmore%20javascript%20from%20http%3A%2F%2Fwww.smallrain.net%20%0D%0A%20%20%20%20%20%20%20%20function%20sAlert(str)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20msgw%2Cmsgh%2Cbordercolor%3B%20%0D%0A%20%20%20%20%20%20%20%20msgw%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%0A%20%20%20%20%20%20%20%20msgh%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%0A%20%20%20%20%20%20%20%20titleheight%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%0A%20%20%20%20%20%20%20%20bordercolor%3D%22%23c51100%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%0A%20%20%20%20%20%20%20%20titlecolor%3D%22%23c51100%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%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20sWidth%2CsHeight%3B%20%0D%0A%20%20%20%20%20%20%20%20sWidth%3Dscreen.width%3B%20%0D%0A%20%20%20%20%20%20%20%20sHeight%3Dscreen.height%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20var%20bgObj%3Ddocument.createElement(%22div%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.setAttribute('id'%2C'bgDiv')%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.position%3D%22absolute%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.top%3D%220%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.background%3D%22%23cccccc%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.filter%3D%22progid%3ADXImageTransform.Microsoft.Alpha(style%3D3%2Copacity%3D25%2CfinishOpacity%3D75%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.opacity%3D%220.6%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.left%3D%220%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.width%3DsWidth%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.height%3DsHeight%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20bgObj.style.zIndex%20%3D%20%2210000%22%3B%20%0D%0A%20%20%20%20%20%20%20%20document.body.appendChild(bgObj)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20msgObj%3Ddocument.createElement(%22div%22)%20%0D%0A%20%20%20%20%20%20%20%20msgObj.setAttribute(%22id%22%2C%22msgDiv%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.setAttribute(%22align%22%2C%22center%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.background%3D%22white%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.border%3D%221px%20solid%20%22%20%2B%20bordercolor%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.position%20%3D%20%22absolute%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.left%20%3D%20%2250%25%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.top%20%3D%20%2250%25%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.font%3D%2212px%2F1.6em%20Verdana%2C%20Geneva%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.marginLeft%20%3D%20%22-225px%22%20%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.marginTop%20%3D%20-75%2Bdocument.documentElement.scrollTop%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.width%20%3D%20msgw%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.height%20%3Dmsgh%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.textAlign%20%3D%20%22center%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.lineHeight%20%3D%2225px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20msgObj.style.zIndex%20%3D%20%2210001%22%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20var%20title%3Ddocument.createElement(%22h4%22)%3B%20%0D%0A%20%20%20%20%20%20%20title.setAttribute(%22id%22%2C%22msgTitle%22)%3B%20%0D%0A%20%20%20%20%20%20%20title.setAttribute(%22align%22%2C%22right%22)%3B%20%0D%0A%20%20%20%20%20%20%20title.style.margin%3D%220%22%3B%20%0D%0A%20%20%20%20%20%20%20title.style.padding%3D%223px%22%3B%20%0D%0A%20%20%20%20%20%20%20title.style.background%3Dbordercolor%3B%20%0D%0A%20%20%20%20%20%20%20title.style.filter%3D%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%0A%20%20%20%20%20%20%20title.style.opacity%3D%220.75%22%3B%20%0D%0A%20%20%20%20%20%20%20title.style.border%3D%221px%20solid%20%22%20%2B%20bordercolor%3B%20%0D%0A%20%20%20%20%20%20%20title.style.height%3D%2218px%22%3B%20%0D%0A%20%20%20%20%20%20%20title.style.font%3D%2212px%20Verdana%2C%20Geneva%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3B%20%0D%0A%20%20%20%20%20%20%20title.style.color%3D%22white%22%3B%20%0D%0A%20%20%20%20%20%20%20title.style.cursor%3D%22pointer%22%3B%20%0D%0A%20%20%20%20%20%20%20title.innerHTML%3D%22%E5%85%B3%E9%97%AD%22%3B%20%0D%0A%20%20%20%20%20%20%20title.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.body.removeChild(bgObj)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22msgDiv%22).removeChild(title)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.body.removeChild(msgObj)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20document.body.appendChild(msgObj)%3B%20%0D%0A%20%20%20%20%20%20%20document.getElementById(%22msgDiv%22).appendChild(title)%3B%20%0D%0A%20%20%20%20%20%20%20var%20txt%3Ddocument.createElement(%22p%22)%3B%20%0D%0A%20%20%20%20%20%20%20txt.style.margin%3D%221em%200%22%20%0D%0A%20%20%20%20%20%20%20txt.setAttribute(%22id%22%2C%22msgTxt%22)%3B%20%0D%0A%20%20%20%20%20%20%20txt.innerHTML%3Dstr%3B%20%0D%0A%20%20%20%20%20%20%20document.getElementById(%22msgDiv%22).appendChild(txt)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%3C%2Fscript%3E">
<input type="button" value="点击这里" onclick="sAlert('test弹窗效果');" />

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

教程首页更多教程