怎么用一个按钮控制弹出层的显示和隐藏
日期：2014-05-16 浏览次数：20606 次
如何用一个按钮控制弹出层的显示和隐藏？
而且要求弹出层的位置始终在按钮的上方，默认不显示，点击其他地方也可以关闭层，效果就和qq聊天窗口的“插入表情”一样
求详细代码
------解决方案--------------------
你有导入jquery吗？必须倒入jquery才可以的。
<script language="javascript" src="C:\Documents and Settings\bree06\My Documents\jquery.js"></script>
修改这里，改为你自己的jquery路径即可。
------解决方案--------------------
不弹出层2，也不做任何处理代码：
而且要求弹出层的位置始终在按钮的上方，默认不显示，点击其他地方也可以关闭层，效果就和qq聊天窗口的“插入表情”一样
求详细代码
------解决方案--------------------
你有导入jquery吗？必须倒入jquery才可以的。
<script language="javascript" src="C:\Documents and Settings\bree06\My Documents\jquery.js"></script>
修改这里，改为你自己的jquery路径即可。
------解决方案--------------------
不弹出层2，也不做任何处理代码：
- HTML code
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
