Jquery弹窗
2016-11-07 09:00 天疯狂石 阅读(339) 评论(0) 编辑 收藏 举报<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(); });//点击确定弹走 });