您的位置：首页 > 其它

一个很简单的弹窗

2015-06-19 10:37 253 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.7.1.js"></script>

<style type="text/css">
#divpanel {
background-color: white;
display: none;
position: absolute;
left: 380px;
top: 200px;
width: 500px;
height: 300px;
}

#bg {
background-color: #808080;
opacity: 0.6;
display: none;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("#divpanel,#bg").show();
});
$("#closewin").click(function () {
$("#divpanel,#bg").hide();
});
})

</script>
</head>
<body>
<input type="button" name="name" value="弹窗 " id="btn1" />
<div id="bg"></div>
<div id="divpanel">
<div id="closewin" style="float: right; cursor: pointer">关闭</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航