Jquery弹窗
<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();
});//点击确定弹走
});
Jquery弹窗的更多相关文章
- Jquery弹窗组件
下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...
- jquery 弹窗插件 layer
jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...
- 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)
感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...
- Jquery弹窗效果
1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- (转)Jquery弹窗插件Lhgdialog的用法
Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...
- java菜鸟篇<三> Jquery弹窗插件Lhgdialog的用法( 原文搬抄+添加,方便以后查找,书签太多了)
今天带我的大神让我做个消息提示,我准备用dialog作,于是乎百度+自己动动脑子 百度原文: Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容. ...
- Jquery弹窗插件Lhgdialog的用法
Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...
- jquery弹窗插件
.zhuti { position:absolute; z-index:; font-size:14px; border-radius:5px; box-shadow: 5px white; over ...
- jquery弹窗插件layer:layer.layui.com
这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...
随机推荐
- 缩进与对齐——正确地使用Tab和空格
写代码时大家都会使用缩进(indentation)和对齐(alignment),这是两个相关而又不同的概念,两者都是为了提高代码的可读性.缩进出现在一行的最左边,目的是明显地区分开包含与被包含的代码: ...
- Jedis API 详细示例
Jedis API 详细示例 https://www.jianshu.com/p/125357ee7651
- 总想自己动动手系列·1·本地和外网(Liunx服务器上部署的web项目)按照自定义的报文格式进行交互(准备篇)
一.准备工作 (1)有一台属于自己的云服务器,并成功部署和发布一个web项目(当然,本质上来说Java-Project也没问题),通过外网IP可以正常访问该web项目. 需要说明的是:任何web项目, ...
- Struts2之文件上传(单文件/多文件)
<一>简述: Struts2的文件上传其实也是通过拦截器来实现的,只是该拦截器定义为默认拦截器了,所以不用自己去手工配置,<interceptor name="fileUp ...
- C# Dictionary通过value获取对应的key值[转发]
1:最直白的循环遍历方法,可以分为遍历key--value键值对以及所有的key两种表现形式 2:用Linq的方式去查询(当然了这里要添加对应的命名空间 using System.Linq) 如下为一 ...
- Execute failed: java.io.IOException: Cannot run program "sdk-linux/build-tools/22.0.0/aapt": error=2
在Linux上使用ant编译打包apk的时候,出现以下的错误及解决方法: 1./usr/local/android-sdk-linux/tools/ant/build.xml:698: Execute ...
- 双系统 ubuntu装完系统后 丢失原win系统启动项
sudo update-grub 可以尝试以上命令 注意这里是先装的win 后装的ubuntu
- Hive面试题——累计求和
需求: 有如下访客访问次数统计表 t_access_times 访客 月份 访问次数 A 2015-01 5 A 2015-01 15 B 2015-01 5 A 2015-01 8 B 2015-0 ...
- [Asp.Net]最近一个项目的总结
引言 项目到目前告一段落,目前进入测试阶段,下周就要去部署了.虽然项目不大,但是从头到尾都是自己一个人负责,在完成编码之后,对代码进行走查,命名规范,业务逻辑,代码优化等,能负责一个项目的整个编码,非 ...
- tsung的配置使用
1.在root下新建.tsung文件,在.tsung文件新建log文件夹..tsung文件用于存放log和xml文件 2.复制/usr/local/tsung/share/doc/tsung/exam ...