html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...

当文本框获得焦点的时候，在文本框的下方显示一个浮动层。

当用户点击除了文本框和浮动层以外的网页空白处时，要隐藏浮动层。

当用户点击浮动层时，改变文本框的值。

function $(id){

return (document.getElementById(id));

}

function show_div(evt) {

var od = $('div1');

var e = window.event || evt;

var o = e.srcElement || e.target;

with (od.style) {

display = 'block';

left = o.offsetLeft + 'px';

top = o.offsetTop + o.offsetHeight + 1 + 'px';

}

}

function hide_div(evt) {

$('div1').style.display = 'none';

}

function control_bubble(oEvent) {

//取消冒泡

oEvent = oEvent || window.event;

if (document.all) {

oEvent.cancelBubble = true;

} else {

oEvent.stopPropagation();

}

};

function fill_input(oEvent) {

$('text1').value = $('div1').innerHTML;

control_bubble(oEvent);

}

window.onload = function() {

$("text1").onfocus = show_div;

document.onclick = function() {

//隐藏层

hide_div();

};

$("text1").onclick = control_bubble;

$("div1").onclick = fill_input;

}

style="background:#666;position:absolute;overflow:auto;display:none;padding:50px;">点击我