标签:range images alt int rac script 窗口 开始 com
<title>弹窗</title>
<script src="JS/jquery-1.7.2.js"></script>
<style type="text/css">
#tanchuang {
position:fixed;/*固定住窗口*/
top:100px;
width:30%;
height:300px;
top:-1000px;
left:35%;
overflow:hidden;
z-index:100001;/*弹窗比遮罩要高*/
}
#tc_top {
position:relative;
width:100%;
height:40px;
background-color:#0026ff;
color:white;
text-align:center;
line-height:40px;
}
#tc_main {
position:relative;
width:100%;
height:220px;
background-color:#0ff;
}
#tc_maintext {
position:relative;
width:70%;
height:80%;
left:15%;
top:10%;
background-color:orange;
text-align:center;
}
#tc_bottom {
position:relative;
width:100%;
height:40px;
background-color:#0026ff;
}
#tc_btnok {
position:relative;
width:30%;
height:30px;
background-color:#808080;
left:35%;
top:5px;
text-align:center;
color:white;
line-height:30px;
cursor:pointer;
}
#zhezhao {
position:fixed;
width:100%;
height:100%;
background-color:black;
z-index:100000;
opacity:0.4;
display:none;
}
</style>
<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();
});//点击确定弹走
});
标签:range images alt int rac script 窗口 开始 com
原文地址:http://www.cnblogs.com/yp11/p/5985322.html