您的位置：首页 > 其它

弹窗

2016-04-20 20:52 232 查看

<!doctype html>

<style>
#win{
width : 400px;
height: 200px;
position : absolute;
top : 50%;
left: 50%;
margin-left: -200px;
margin-top:-100px;
border:1px black solid;
display : none;
}
#title{
background-color : gray;
color : white;
padding-left: 3px;
}
#cotent{
padding-left : 3px;
padding-top :  5px;
}
#close{
margin-left: 280px;
cursor: pointer;
}
</style>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function showWin(){
var winNode = $("#win");
winNode.css("display", "block");
winNode.show("slow");
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
winNode.css("display","none");
winNode.fadeOut("slow");
winNode.hide("slow");
}
</script>

<html>
<body>
<a onclick="showWin()" href="#">弹出窗口</a>
<div id="win">
<div id="title">我是标题栏！<a id="close" onclick="hide()">X</a></div>
<div id="content">我是一个窗口！</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航