Jquery--弹窗
2024-10-14 23:24:17
<title>弹窗</title>
<script src="JS/jquery-1.7.2.js"></script>
<style type="text/css">
#tanchuang {
position:fixed;/*固定住窗口*/
top:100px;
width:%;
height:300px;
top:-1000px;
left:%;
overflow:hidden;
z-index:;/*弹窗比遮罩要高*/
}
#tc_top {
position:relative;
width:%;
height:40px;
background-color:#0026ff;
color:white;
text-align:center;
line-height:40px;
}
#tc_main {
position:relative;
width:%;
height:220px;
background-color:#0ff;
}
#tc_maintext {
position:relative;
width:%;
height:%;
left:%;
top:%;
background-color:orange;
text-align:center;
}
#tc_bottom {
position:relative;
width:%;
height:40px;
background-color:#0026ff;
}
#tc_btnok {
position:relative;
width:%;
height:30px;
background-color:#;
left:%;
top:5px;
text-align:center;
color:white;
line-height:30px;
cursor:pointer;
}
#zhezhao {
position:fixed;
width:%;
height:%;
background-color:black;
z-index:;
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: "" }, ).animate({ top: "" }, ).animate({ top: "" }, );
$("#tc_top").text(a);
$("#tc_maintext").text(b);
};
$("#tc_btnok").click(function () {
$("#tanchuang").animate({ top: "-2000" }, , function () {
$("#zhezhao").hide();
});//点击确定弹走
});
最新文章
- Visual Studio 2008 Package Load Failure:未能正确加载包“Microsoft.VisualStudio.Xaml”
- Shell入门教程：流程控制（6）while 循环
- centos6.x开机卡死
- Java 并发和多线程(三) 多线程的代价 [转]
- chmod和fchmod函数 /chown ,fchown,lchown函数
- Java基础の第二弹 基础语法
- [转] Centos 6.4 python 2.6 升级到 2.7
- Redis基本操作-20150608
- Redis缓存服务搭建及实现数据读写
- UVA 12902 Reverse Polish Notation
- Android应用如何开机自启动、自启动失败原因
- LLBL Gen Pro 5.0
- 用Maven创建web项目
- python之celery的使用(一)
- Python二级-----------程序冲刺4
- Nancy in .NET Core学习笔记 - 路由
- Asp.net Security框架（1）
- WebSocket原理与实践(四)--生成数据帧
- 2018 ACM 网络选拔赛 沈阳赛区
- Linux实例安装VNC Server实现图形化访问