<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
font-size: 13px;
}
.frame{
width: 276px;
height: 100px;
border: 1px solid #CCCCCC;
display: none;
}
.frame .title{
font-weight: bold;
width: 260px;
padding: 8px;
background-color: #EEEEEE;
}
.frame .content{
padding: 15px 8px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.cls{
clear: both;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top",($(window).height() - this.height()) /2
+ $(window).scrollTop() + "px");
this.css("left",($(window).width() - this.width()) /2
+ $(window).scrollLeft() + "px" );
return this;
}
</script>
<script>
$(function () {
$(".frame").center().show("normal");
$(".title").find("img").bind("click",function () {
$(".frame").hide("normal");
})
});
</script>
</head>
<body>
<div class="frame">
<div class="title fl">
<div class="fl">主题</div>
<div class="fr">
<img src="images/close.png"alt="close">
</div>
</div>
<div class="content cls">内容</div>
</div>
</body>
</html>