猿问

利用js实现弹出层的效果

<button id="btn">这是一个弹出层按钮</button>

<script>

window.onload=function(){

s=document.getElementById('btn')

s.onlick=function(){

er=document.createElement("div")

er.id="dive"

er.innerHTML="<div  id='close'></div>"

document.body.appendChild(er)

er.style.left=(document.documentElement.clientWidth-er.offsetWidth)/2+"px"

er.style.top=(document.documentElement.clientHeight-er.offsetHeight)/2+"px"

document.getElementById('close').onclick=function(){ document.body.removeChild(er)}   

}

}

</script>

为什么没有显示出来结果

woshi123w
浏览 2462回答 6
6回答

Dosin

首先是绑定事件的时候onclick少了一个c,其次弹出层没有定义宽高,也没有内容,撑不起来,再次就是弹出层没有添加绝对定位,设置left和top值也是白搭

苍白的尾巴

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id="btn">这是一个弹出层按钮</button> <script>     window.onload = function() {         var s = document.getElementById('btn');         s.onclick = function() {             var er = document.createElement("div");             er.innerHTML = "我是div中文本,点我可以隐藏哦";             document.body.appendChild(er);             s.onmouseout = function() {                 document.body.removeChild(er);             }         }     }      </script> </body> </html>点击出现,鼠标挪开消失,只能消除最新的文字。

惟愿_无事常相见

没有显示效果是因为你的代码中间有问题,dreamwaver在代码中存在错误的时候有事也不会保存,现在浏览器一般都能检查源代码,你查一下就知道你的代码问题在哪儿了。。        多看看正确的代码是怎么写的=_=  凭感觉写不好
随时随地看视频慕课网APP
我要回答