Javascript 气泡
内容纲要
用Javascript配合CSS写了个气泡的弹窗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>-弹出气泡</title>
</head>
<style>
body {
font-size: 12px;
}
p{
cursor: pointer;
color: blue;
}
</style>
<body>
<p onclick="show();">弹一个气泡</p>
<script language="javascript">
function cmsgbox(vtitle, vwidth, vhight, vtop, vleft) {
this.title = vtitle;
this.width = vwidth;
this.height = vhight;
this.top = vtop;
this.left = vleft;
this.id = 0;
}
cmsgbox.prototype.showdiv = function() {
var str = "";
str += "<div id='div1' style='z-index:1;background-color:white;position:absolute;border:2px solid slategray;left:" + this.vleft + "px;top:" + this.vtop + "px;width:" + this.width + "px;'>";
str += "<div style='padding-bottom:2px;background-color:slategray;width:100%;height:16px;color:white;' >";
str += " <div style='float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;width:" + (parseInt(this.width) - 24 * 2 - 5) + "px;'>" + this.title + "</div>";
str += " <span style='width:14px;font-family:webdings;cursor:hand;'>0</span>";
str += " <span style='width:14px;font-family:webdings;cursor:hand;' onclick='cmsgbox.closediv(this);'>r</span>";
str += "</div>";
str += "<div style=' margin:10px 5px 10px 10px;word-break:break-all;'>";
str += "xxx";
str += "</div>";
str += "</div>";
//document.write(str);
document.body.insertAdjacentHTML("beforeEnd", str);
}
function show() {
var box = new cmsgbox('气泡呀', 400, 300);
box.showdiv();
}
</script>
</body>
</html>