首页 > 代码库 > Jquery--弹窗
Jquery--弹窗
<title>弹窗</title>
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/"弹窗"id="tc" /> <!--弹窗结束--> </form> </body> </html> <script src=http://www.mamicode.com/"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();
});//点击确定弹走
});
Jquery--弹窗
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。