利用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
Html/CSS
Html5
JavaScript