为了账号安全,请及时绑定邮箱和手机立即绑定

利用js实现弹出层的效果

利用js实现弹出层的效果

woshi123w 2016-06-21 20:35:51
<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>为什么没有显示出来结果
查看完整描述

6 回答

?
Dosin

TA贡献4条经验 获得超9个赞

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

查看完整回答
反对 回复 2016-06-22
?
苍白的尾巴

TA贡献7条经验 获得超1个赞

<!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>

点击出现,鼠标挪开消失,只能消除最新的文字。

查看完整回答
反对 回复 2016-06-22
?
惟愿_无事常相见

TA贡献30条经验 获得超25个赞

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

查看完整回答
反对 回复 2016-06-21
  • 6 回答
  • 1 关注
  • 2461 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信