<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弹窗的更多相关文章

  1. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  2. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  3. 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  4. Jquery弹窗效果

    1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. (转)Jquery弹窗插件Lhgdialog的用法

    Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...

  6. java菜鸟篇<三> Jquery弹窗插件Lhgdialog的用法( 原文搬抄+添加,方便以后查找,书签太多了)

    今天带我的大神让我做个消息提示,我准备用dialog作,于是乎百度+自己动动脑子 百度原文: Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容. ...

  7. Jquery弹窗插件Lhgdialog的用法

    Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...

  8. jquery弹窗插件

    .zhuti { position:absolute; z-index:; font-size:14px; border-radius:5px; box-shadow: 5px white; over ...

  9. jquery弹窗插件layer:layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

随机推荐

  1. hadoop中InputFormat 接口的设计与实现

    InputFormat 主要用于描述输入数据的格式, 它提供以下两个功能.❑数据切分:按照某个策略将输入数据切分成若干个 split, 以便确定 Map Task 个数以及对应的 split.❑为 M ...

  2. myBatis + SpringMVC上传、下载文件

    摘自: http://limingnihao.iteye.com/blog/1069503 环境:maven+SpringMVC + Spring + MyBatis + MySql 本文主要说明如何 ...

  3. Javaee项目经验须知

    Java的主要应用领域就是企业级的项目开发!具体要点(09年,那一年我去面试,被拒了几次,想起来还不错!他锻炼了我的心理素质,让我体会到很多,笑一个吧!): 1.掌握项目开发的基本步骤 2.具备极强的 ...

  4. 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

  5. (C++)C++类继承中的构造函数和析构函数

    思想: 在C++的类继承中, 建立对象时,首先调用基类的构造函数,然后在调用下一个派生类的构造函数,依次类推: 析构对象时,其顺序正好与构造相反: 例子: #include <iostream& ...

  6. C#基础视频教程6.2 如何简单读写数据库

    上一节我们简单介绍了数据库的读写,所使用的数据库都是随便写的(用水果代替,但不是真正的食品零售数据表,至少没有价格,销量等等).这一节我们思考如何实现一个测试题的数据库,所谓的测试题数据库就是假定系统 ...

  7. 父元素没有设置定位 position absolute 解析

    1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  8. 金蝶K3,域环境中,无本地用户管理员权限的域用户如何设置注册表权限?

    如果该用户是属于Power Users组:只需要给用户添加注册表中的HKEY_LOCAL_MACHINE的SOFTWARE完全控制的权限.(勾选允许父项的继承权限和传播到该对象和所有子对象) 如果该用 ...

  9. 参数依赖查找(ADL,Argument-dependent lookup)

    参数依赖查找(Argument-dependent lookup),又称 ADL 或 Koenig 查找,是一组于函数调用表达式查找非限定函数名的规则,包含对重载运算符的隐式函数调用.在通常非限定名称 ...

  10. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...