直接上代碼：
<!DOCTYPE html>
<html>
<head>
<title>點擊頁面其他部分，隱藏浮框</title>
</head>
<body>
<style type="text/css">
.content{
position: relative;
}
.content input{
display: block; width: 100px; height: 30px;
}
.content .float{
top: 30px;
display: none;
position: absolute;
width: 100px;
height: 100px;
background: #1ab395;
}
</style>
<div class="content">
<input type="test" name="test" id="input-test">
<div class="float"></div>
</div>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).mouseup(function (e) {
var _con = $('.content');
if (!_con.is(e.target) && _con.has(e.target).length === 0) {
// 浮框-隱藏
$('.float').hide();
}
})
$(document).ready(function() {
$("#input-test").on('click', function(){
// 浮框-顯示
$('.float').show();
})
});
</script>
</body>
</html>