html点击按钮弹出悬浮窗_JS点击出现悬浮窗效果详解

Demo

window.onload = function(){

var btn = document.getElementsByTagName('button')[0];

var flt = document.getElementsByTagName('div')[0];

btn.onclick = function(){

event.cancelBubble = true;

var x = btn.offsetLeft - 15 + 'px';

var y = btn.offsetTop - 100 + 'px';

flt.style.top = y;

flt.style.left = x;

flt.style.display = 'block';

}

document.onclick = function(){

flt.style.display = 'none';

}

}

*{

margin: 0px;

padding: 0px;

}

div{

width: 60px;

height: 100px;

background: #33ccff;

display: none;

position: absolute;

}

div ul{

text-align: center;

}

div li{

list-style-type: none;

}

button{

top: 300px;

left: 400px;

position: absolute;

}

Click

• Demo 1
• Demo 2
• Demo 3
• Demo 4
• Demo 5