By default, the panel appears gray. When the page, click the button and the gray area outside the panel, the panel disappears; click the button, gray panel appears; click on the gray area of the panel, the panel can not disappear.
The main study: event bubbling and bubbling cancel the event.
Code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>习题-仿select下拉框</title>
<style>
#div1 {
width: 400px;
height: 300px;
background: #ccc;
}
</style>
</head>
<body>
<input id='button' type='button' value='显示' />
<div id='div1'></div>
<script>
//此处写代码
</script>
</body>
</html>
Reference Code:
window.onload = function () {
var oBtn = document.getElementById('button');
var oDiv = document.getElementById('div1');
oBtn.onclick = oDiv.onclick = function (ev) {
var oEvent = ev || event;
oDiv.style.display = 'block';
oEvent.cancelBubble = true;
}
document.onclick = function () {
oDiv.style.display = 'none';
}
}