如何用一个按钮控制弹出层的显示和隐藏？

Question

而且要求弹出层的位置始终在按钮的上方，默认不显示，点击其他地方也可以关闭层，效果就和qq聊天窗口的“插入表情”一样
求详细代码

Answer 1

<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" value="^_^1" onclick="showFace(this)"><span style="width: 300px;"></span>
<input type="button" value="^_^2" onclick="showFace(this)">
<input type="button" style="position: absolute; left: 600px; top: 500px;" value="^_^3" onclick="showFace(this)">
<script>
function showFace(evnet){
document.getElementById('face').style.top=evnet.offsetTop-213;
document.getElementById('face').style.left=evnet.offsetLeft;
var _dis=document.getElementById('face').style.display;
document.getElementById('face').style.display=_dis=="block"?"none":"block";
}
function hideFace(){
document.getElementById('face').style.display="none";
}
function document.onclick(){
if(document.getElementById('face').style.display=="block" 
&& event.srcElement.tagName !='INPUT'
&& event.srcElement.tagName !='DIV'){
document.getElementById('face').style.display="none";
}
}
</script>
这里有三个测试按钮，目的只是为了实现楼主想要的效果。便于测试。  只要一个按钮就可以解决一些不便了。
有不懂的再问

Answer 2

如果不用jq的话 我的思路是取余 做一个全局变量i=0与2取余  任何数与2取余得1或者0
1显示 0隐藏就可以了 点击按钮i++

Answer 3

css样式:
<style type="text/css"> 
.div1
{
 display:none;
 position:absolute ;
 left:50px;
 top:50px;
 width:100px;
 height:100px;
 border:1px solid red ;
}
  </style>jquery代码:$(function(){   
$("#input1").click(function(){  
 var input_height =  $(this).height();//
 var input_width =  $(this).width();
 var x = event.clientX ;
 var y = event.clientY ;
 var offsetX = event.offsetX;          
 var offsetY = event.offsetY;       
var init_x = x-offsetX ;
var init_y = y-offsetY+input_height*1.5 ;
$("#div1").css("left",init_x);
$("#div1").css("top",init_y);
$("#div1").show();
});$("#input2").click(function(){
$("#div1").hide();
});
});html代码:
<input id="input1" name="input1" type="text" value="输入"/>
<input id="input2" type="button" value="隐藏"/>
<div id="div1" class="div1">
弹出层
</div>

Answer 4

我现在没电脑上班呢 只能说思路 不取余也可以 
div的点击函数
....
var i=0;
if(i==0)
{
显示
i=1;
}
else
{
隐藏
i==0;
}
....
这是思路 你看一下 我觉得可以

Answer 5

如果想让其再ff和chrome下运行，需要修改一句代码  function document.onclick(){
改为：
document.onclick=function (){即可！有不懂的再问。

Answer 6

如果想让其再ff和chrome下运行，只需要修改一句代码  function document.onclick(){
改为：
document.onclick=function (){即可！有不懂的再问。

Answer 7

恩恩，非常感谢，还有一个问题，我同一个页面可能需要两个或者更多按钮，怎么修改？你这段JS我自己试着改了一下showFace，不过改完之后总是有一个按钮出错，相互冲突

Answer 8

而且我放到table里或者div里好像都出错，单拿出来就没事

Answer 9

这样就不行了<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>

<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559</div>
<input type="button" value="^_^1" onclick="showFace(this)"><span style="width: 300px;"></span>
<input type="button" value="^_^2" onclick="showFace(this)">
<script>
function showFace(evnet){
    document.getElementById('face').style.top=evnet.offsetTop-213;
    document.getElementById('face').style.left=evnet.offsetLeft;
    var _dis=document.getElementById('face').style.display;
    document.getElementById('face').style.display=_dis=="block"?"none":"block";
}
function hideFace(){
    document.getElementById('face').style.display="none";
}
document.onclick=function (){
    if(document.getElementById('face').style.display=="block" 
    && event.srcElement.tagName !='INPUT'
    && event.srcElement.tagName !='DIV'){
        document.getElementById('face').style.display="none";
    }
}
</script>

</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 10

你所谓的加入到table或div中好像出错，应该是位置对不齐吧！ 原因是offsetTop、offsetLeft去的是控件相对于上级节点的位置，而上级相对于上上级的位置就取不到的。所以这里left和top应该取的有问题。修改showFace函数可解决此问题：function showFace(evnet){
var _top=0,_left=0;
var _op=evnet;
while(_op!=null){
_top+=_op.offsetTop;
_left+=_op.offsetLeft;
_op=_op.offsetParent;
}
document.getElementById('face').style.top=_top-213;
document.getElementById('face').style.left=_left;
var _dis=document.getElementById('face').style.display;
document.getElementById('face').style.display=_dis=="block"?"none":"block";
}如果还有其他问题，欢迎说出来，且说明确！有不懂的再问

Answer 11

太感谢了，还有最后一个问题，就是比如我这个页面有两个按钮，按钮A和按钮B，现在是当我点击按钮A的时候会弹出一个层，而点击按钮B的时候是A弹出的层消失，如果想要按钮B那个层还需要再点击一下，我希望的结果是当我点击A是弹出一个层，然后点击B时，A层消失同时B层出现，有没有办法实现？

Answer 12

很简单！修改showFace函数：function showFace(evnet){
  var _top=0,_left=0;
var _op=evnet;
while(_op!=null){
_top+=_op.offsetTop;
_left+=_op.offsetLeft;
_op=_op.offsetParent;
}
document.getElementById('face').style.top=_top-213;
document.getElementById('face').style.left=_left;
document.getElementById('face').innerHTML='software group qq群：58156559<br><br><br>'+evnet.value;
var _flag=document.getElementById('face').getAttribute('software');
if(_flag!=evnet.value){
document.getElementById('face').style.display='block';
document.getElementById('face').setAttribute('software',evnet.value);
}else{
 document.getElementById('face').style.display="none";
 document.getElementById('face').setAttribute('software',-1);
}
}有不懂的再问。

Answer 13

给你做了一个炫的。带箭头的DIV提示框加阴影加弹出和隐藏动画。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>提示框</title>
<style>
.bd {
padding: 3px;
position: relative;
border: 1px solid #B3B3B3;
border-radius:5px ;
line-height: 22px;
*height: 1%;
width: 150px;
background:#fff;
font-size: 12px;
}
.bd s{
position:absolute;
top:34px;
left:25px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-left:8px dotted transparent;
border-right:8px dotted transparent;
border-top:8px solid transparent;
border-style:solid dashed dashed dashed;
border-top-color:#888;
}
.bd i{
position:absolute;
top:-10px;
left:-9px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-left:8px dotted transparent;
border-right:8px dotted transparent;
border-top:8px solid transparent;
border-style:solid dashed dashed dashed ;
border-top-color:#fff;
}
.container {position:absolute;padding:0px;display:none;}
.shadow {float:left;}
.frame {position:relative; background:#fff; padding:5px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}.link{padding:55px 5px 5px 0;}
.link li{float:left;margin-left:10px;}
</style>
<!--[if IE]>
<style type="text/css">
.container {padding-left:14px;display:none;}
.frame {left:4px; top:4px;}
.shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
</style>
<![endif]-->
<script language="javascript" src="C:\Documents and Settings\bree06\My Documents\jquery.js"></script>
</head>
<body >
<div class="link">
<ul>
<li><a href="#">提示1</a></li>
<li><a href="#">提示2</a></li>
<li><a href="#">提示3</a></li>
</ul>
</div>
<div class="container"><div class="shadow">
<div class="frame bd"><font>&nbsp;</font><s><i></i></s></div>
</div></div>
<script language="javascript">
var outside = true, speed = 200;
$('div.link a').bind('click', function(){
outside = false;
$('.container').hide();
var msg = "这是" + $(this).text();
var top = $(this).offset().top-Number($('.bd s').css('top').replace('px', ''))-10;
var left = $(this).offset().left-Number($('.bd s').css('left').replace('px', ''));
$('div.bd>font').html(msg);
$('.container').css({top:top,left:left}).show(speed);
});
$(document).bind('click', function(event){
  var targ;
if (event.target) targ = event.target
else if (event.srcElement) targ = event.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
if (outside) {
var clas = $(targ).attr('class');
if (clas == undefined) {
if ($(targ).parents('div.bd').attr('class') == undefined) $('.container').hide(speed);
} else if (clas.search('bd') == -1) $('.container').hide(speed);
}
outside = true;
});
</script>
</body>
</html>

Answer 14

呃，我试了一下，IE9和Chrome都不行，晕

Answer 15

将文件另存为.htm格式。编码格式utf8
IE9我没有但是IE6和Google Chrome是测试通过的哟！你现在是什么效果？

Answer 16

现在是点击之后没反应，就跟一个空链接一样，要不你把效果发我邮箱吧，[email protected]

Answer 17

你有导入jquery吗？必须倒入jquery才可以的。
<script language="javascript" src="C:\Documents and Settings\bree06\My Documents\jquery.js"></script>
修改这里，改为你自己的jquery路径即可。

Answer 18

http://topic.csdn.net/u/20120719/17/e340eeac-8b73-402f-bc22-4affc23e4159.html?39857  求大家指教

Answer 19

http://topic.csdn.net/u/20120719/17/e340eeac-8b73-402f-bc22-4affc23e4159.html?39857

Answer 20

不弹出层2，也不做任何处理代码：<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层111111</div>
<div id="face2" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层22222</div>
<input type="button" value="^_^1" onclick="showFace(this,'')"><span style="width: 300px;"></span>
<input type="button" value="^_^2" onclick="showFace(this,'2')">
<script>
function showFace(evnet,p2){
  var _top=0,_left=0;
var _op=evnet;
while(_op!=null){
_top+=_op.offsetTop;
_left+=_op.offsetLeft;
_op=_op.offsetParent;
}
document.getElementById('face'+p2).style.top=_top-213;
document.getElementById('face'+p2).style.left=_left;document.getElementById('face'+p2).style.display=(document.getElementById('face').style.display=="block" || document.getElementById('face2').style.display=="block")?'none':'block';}
function hideFace(){
  document.getElementById('face').style.display="none";
  document.getElementById('face2').style.display="none";
}
document.onclick=function (){
  if((document.getElementById('face').style.display=="block" ||  document.getElementById('face2').style.display=="block")
  && event.srcElement.tagName !='INPUT'
  && event.srcElement.tagName !='DIV'){
  document.getElementById('face').style.display="none";
  document.getElementById('face2').style.display="none";
  }
}
</script>关闭层1  弹出层2 代码：<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层111111</div>
<div id="face2" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层22222</div>
<input type="button" value="^_^1" onclick="showFace(this,'')"><span style="width: 300px;"></span>
<input type="button" value="^_^2" onclick="showFace(this,'2')">
<script>
function showFace(evnet,p2){
  var _top=0,_left=0;
var _op=evnet;
while(_op!=null){
_top+=_op.offsetTop;
_left+=_op.offsetLeft;
_op=_op.offsetParent;
}
document.getElementById('face'+p2).style.top=_top-213;
document.getElementById('face'+p2).style.left=_left;
if(p2=='2'){
document.getElementById('face').style.display='none';
}else{
document.getElementById('face2').style.display='none';
}
document.getElementById('face'+p2).style.display=document.getElementById('face'+p2).style.display=="block"?'none':'block';}
function hideFace(){
  document.getElementById('face').style.display="none";
  document.getElementById('face2').style.display="none";
}
document.onclick=function (){
  if((document.getElementById('face').style.display=="block" ||  document.getElementById('face2').style.display=="block")
  && event.srcElement.tagName !='INPUT'
  && event.srcElement.tagName !='DIV'){
  document.getElementById('face').style.display="none";
  document.getElementById('face2').style.display="none";
  }
}
</script>不懂的再问