类似于一个日期控件,想要实现:当鼠标点击文本框,弹出一个层,可以在层上点击操作,但鼠标点到层以外的任何地方,这个层会自动隐藏。
解决方案 »
- 散分发布本人呕心之作:JavaScript漂亮俄罗斯方块
- 关于EXTJS3.1.1 combo 首次 getForm().submit 提交产生的问题
- 刚学javascript,想问下jquery.js放到什么地方
- if (document.images) 中的 document.images 是什么意思,结果是真或是假吗?
- 判断一个字符串是由两个"*"和两个1-8的数字组成的正则表达式怎么写啊?
- 大家帮忙看看一个小程序啊!!
- 能不能控制弹出的新窗口为隐藏的?
- email的检测,100分
- 请教关于验证码的原理
- EXTJS 化繁为简 减少冗余代码
- JAVASCRIPT--评分练习问题
- 求简单的php加js头像上传并可裁切代码
文本框的 onmouseover 显示层 在层上操作后 层的事件onmouseout 是隐藏层
|------------------------------------------------------|
| 外面的DIV,半透明的 ,浏览器多大这个就多大 |
| 你在这里设置处理函数响应点击事件 |
| |
| |----------------------------------| |
| | 这是里面的DIV | |
| | 用户会认为这个才是弹出窗口 | |
| | | |
| |----------------------------------| |
| |
| |
| |
|------------------------------------------------------|
<head id="Head1" runat="server">
<title>1111</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
window.onload = function(){
document.onclick = function(e){
e = e || window.event;
var dom = e.srcElement|| e.target;
if(dom.id != "dialog" && document.getElementById("dialog").style.display == "block") {
document.getElementById("dialog").style.display = "none";
}
};
};
function openDialog(e) {
document.getElementById("dialog").style.display = "block";
e = e||window.event;
if(+'\v1') {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
</script>
<style>
#dialog {
position:fixed;
left:40%;
top:100px;
background-color:#ccc;
width:200px;
height:120px;
display:none;
}
</style>
</head>
<body>
<input type="button" value="打开" onclick="openDialog(event)" />
<div id="dialog">
这是弹出层
</div>
</body>
</html>
onmouseout可以实现,我一开始弄错了,但是鼠标移到层里的其他控件元素上是,层也会关闭。
document.getElementById("div 的ID ").style.display = "block";
e = e||window.event;
if(+'\v1') {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}<input type="button" value="打开" onclick="openDialog(event,"div 的ID ")" />
document.onclick = function(e){
e = e || window.event;
var dom = e.srcElement|| e.target;
if(dom.id != "dialog" && document.getElementById("dialog").style.display == "block") {
document.getElementById("dialog").style.display = "none";
}
};
};
主要是这部分代码,当单击文档的空白处时,怎样才能获得某一个div第id,这里的'dialog'要是一个变量的话,怎样才能检测到网页中已打开的那个div的id,并获得该id,赋给'dialog'处的变量
onmouseblue隐藏,即失去焦点,通常是点击空白或者点击其它对象时失去焦点
document.onclick=function(){
var e= window.event ? window.event: e,
target = e.srcElement || e.target;
while (target.nodeName.toLowerCase() != "html") {
if(target.id="TheID"){
break;
}
target = target.parentNode;
}
if(target.nodeName.toLowerCase()=="html"){
alert("点击了ID以外的元素");
document.getElementById("TheID").style.display = "none";
}else{
document.getElementById("TheID").style.display = "black"; }
}