![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<title>弹窗</title>
<script src="JS/jquery-1.7.2.js"></script>
<style type="text/css">
#tanchuang {
position:fixed;/*固定住窗口*/
top:100px;
30%;
height:300px;
top:-1000px;
left:35%;
overflow:hidden;
z-index:100001;/*弹窗比遮罩要高*/
}
#tc_top {
position:relative;
100%;
height:40px;
background-color:#0026ff;
color:white;
text-align:center;
line-height:40px;
}
#tc_main {
position:relative;
100%;
height:220px;
background-color:#0ff;
}
#tc_maintext {
position:relative;
70%;
height:80%;
left:15%;
top:10%;
background-color:orange;
text-align:center;
}
#tc_bottom {
position:relative;
100%;
height:40px;
background-color:#0026ff;
}
#tc_btnok {
position:relative;
30%;
height:30px;
background-color:#808080;
left:35%;
top:5px;
text-align:center;
color:white;
line-height:30px;
cursor:pointer;
}
#zhezhao {
position:fixed;
100%;
height:100%;
background-color:black;
z-index:100000;
opacity:0.4;
display:none;
}
</style>
View Code
<input type="text" id="biaoti"/><br />
<input type="text" id="neirong"/>
<!--弹窗开始-->
<div id="zhezhao"></div>
<div id="tanchuang">
<div id="tc_top"></div>
<div id="tc_main">
<div id="tc_maintext"></div>
</div>
<div id="tc_bottom">
<div id="tc_btnok">确定</div>
</div>
</div>
<input type="button" value="弹窗"id="tc" />
<!--弹窗结束-->
</form>
</body>
</html>
<script src="JS/tanchuang.js"></script>
<script type="text/javascript">
$("#tc").click(function () {
tc("标题","内容");
});
</script>
function tc(a, b) {//做成方法,可调用
$("#zhezhao").show();
$("#tanchuang").animate({ top: "100" }, 500).animate({ top: "90" }, 200).animate({ top: "100" }, 200);
$("#tc_top").text(a);
$("#tc_maintext").text(b);
};
$("#tc_btnok").click(function () {
$("#tanchuang").animate({ top: "-2000" }, 500, function () {
$("#zhezhao").hide();
});//点击确定弹走
});