<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();
});//点击确定弹走
});

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 ...

  10. Jquery弹窗

    <title>弹窗</title> <script src="JS/jquery-1.7.2.js"></script> <s ...

随机推荐

  1. ife-task0003学习收获总结

    + 编写可维护的css原则是,尽量减少改动时要编辑的地方(减少代码重复). + CSS布局奇淫技巧之-高度自适应 高度自适应:通过绝对定位来解决高度自适应的问题,元素不设置高度,设置绝对定位,将top ...

  2. web前端响应式

    一.响应式概述: 不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,完整的响应式网站的实现需要考虑到这些问题:响应式布局.响应式html和css.响应式媒体.响应式javascript. 二.移动端布局 ...

  3. 使用7-zip制作自解压安装包

    7-zip制作自解压包很方便,只要在压缩时选择”创建自释放程序”选项. 而自解压安装包有点麻烦,不如WinRAR方便. 准备工具:下载 LZMA SDK 这里面有 7zSD.sfx (16.04版7z ...

  4. [Maven]Maven非常详细完整的教程

    请参考:http://blog.csdn.net/u012152619/article/category/6239920 第四部分已看完 另外也可参看简书:http://www.jianshu.com ...

  5. Window服务安装方式汇总

    一.制作bat文件 1)Install.bat: @echo 安装服务 %SystemRoot%\Microsoft.NET\Framework\v2.0.50727\installutil AppS ...

  6. Android基础之Activity四种启动模式

    这东西是最基础的,发现自己其实没有真正试过,好好研究研究 standard :默认, singleTop :大体上同standard,但是当该Activity实例已经在task栈顶,不再创建新的实例, ...

  7. step by step install Caffe

    Caffe + Ubuntu 14.04 + CUDA 8 + cudnn 8.0+Ananconda3+opencv3.0.0 //由于本人使用的是英文版ubuntu,没装汉语输入法,暂时就用蹩脚的 ...

  8. [Linux编程] module_param()函数学习笔记

    在读TCP cubic源码中,遇到了module_param(),网上查到的资料如下: 在用户态下编程可以通过main()来传递命令行参数,而编写一个内核模块则可通过module_param()来传递 ...

  9. Click模块化路由器

    [概述] Click是一种基于软件控制的模块化路由器.其架构可以大致视为一系列数据包处理模块(称为elements)组成的.一个Click路由器可以看成一张由elements作为顶点,数据包传递路径作 ...

  10. (Array)121. Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...