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 ...
随机推荐
- SVG 可伸缩矢量图形 简介 Path路径
w3school:http://www.w3school.com.cn/svg/svg_intro.asp SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG ...
- java学习笔记15--多线程编程基础2
本文地址:http://www.cnblogs.com/archimedes/p/java-study-note15.html,转载请注明源地址. 线程的生命周期 1.线程的生命周期 线程从产生到消亡 ...
- hihoCoder 1261 String Problem II
时间限制:50000ms 单点时限:5000ms 内存限制:512MB 描写叙述 我们有一个字符串集合S,当中有N个两两不同的字符串.还有M个询问,每一个询问都会先给出一个字符串w,你须要回答下面三个 ...
- 怎样改动android系统字体大小
改动字体大小的方法是运用到一个ActivityManagerNative类 首先先在代码宣告 private Configuration mconfig = new Configuration(); ...
- 函数y=sin(1/x)曲线
该曲线在x趋近于零时振荡很剧烈,在远离零点时振荡越来越平缓. 图线: 代码: <!DOCTYPE html> <html lang="utf-8"> < ...
- 纯css实现单行”截取“
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- linux内核——PAE(物理地址扩展)
引入PAE机制后,分页模式是怎样的呢? 首先,要搞明白几件事,2.6.11以上版本的linux内核中,存在4中页表(页全局目录,页上级目录,页中级目录,页表),这些页表结构是已经存在于硬盘中的,当进程 ...
- Hive面试题——累计求和
需求: 有如下访客访问次数统计表 t_access_times 访客 月份 访问次数 A 2015-01 5 A 2015-01 15 B 2015-01 5 A 2015-01 8 B 2015-0 ...
- 【LeetCode】89. Gray Code (2 solutions)
Gray Code The gray code is a binary numeral system where two successive values differ in only one bi ...
- Android开发优化之——对界面UI的优化(1)
在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开 的.界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局.通常,在这个页面中会用到很 ...