<!DOCTYPE html>
<html>
<head>
<title>111</title>
<style type="text/css">
#tank{
display:none;
position:absolute;
top:200px;
left:400px;
width:260px;
height:80px;
background: #FFFFFF;
border: 1px solid #D8D8D8;
box-shadow: 0 4px 16px 0 ;
border-radius: 2px;
}
#tank p{
cursor: pointer;
font-size: 16px;
color: #1A89E8;
margin-top: 15px;
letter-spacing: 1px;
text-align: right;
}
#es{
width:228px;
color: #555555;
font-size:16px;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="tank">
<p id="es"></p>
<p type="button" onclick="zdl()">我知道了</p>
</div>
<button onclick="myfunction()" value="点击我!">点击我!</button>
<script>
//点击“知道了”就隐藏
function zdl(){
$("#tank").hide();
}
//给p标签赋值
function myfunction(){
p = "弹框"
var dd = document.getElementById("es");
dd.innerText =p+"已经出现了!";
$("#tank").show();
}
</script>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
点击按钮出现弹框,然后给弹框里面添加内容