弹出框--self
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/public.css"/> <link rel="stylesheet" href="css/1.css"/> <title></title> </head> <body> <div class="add_deploy">点击</div> <div class="layer_bg"></div> <div class="layer_con"> <h5 class="tc">配置</h5> <div class="layer_main">222</div> <div class="close">x</div> </div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/1.js"></script> </html>
/*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin:; padding:; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { font-family: "Microsoft YaHei"; font-size: 14px; color: #333; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ul, li { list-style: none; } img { border: none; vertical-align: middle; } a { text-decoration: none; color: #232323; } table { border-collapse: collapse; table-layout: fixed; } input, textarea { outline: none; border: none; } textarea { resize: none; overflow: auto; } .clearfix { zoom:; } .clearfix:after { content: "."; width:; height:; visibility: hidden; display: block; clear: both; overflow: hidden; } .fl { float: left } .fr { float: right } .tl { text-align: left; } .tc { text-align: center } .tr { text-align: right; } .ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inline { display: inline-block; *display: inline; *zoom:; } .blue { color: #208adb; } .red { color: red; } .green { color: green; } /*公共样式--结束*/
.layer_bg { display: none; width: 100%; z-index:; position: fixed; background-color: #000; opacity: 0.3; top:; height:100%; filter: alpha(opacity=30); } .layer_con { display: none; width: 560px; padding-bottom: 20px; background-color: #fff; z-index:; position: fixed; left: 50%; top: 50%; margin-left: -280px; opacity:; filter: alpha(opacity=100); } .close { font-size: 40px; background-color: #c43737; width: 50px; height: 50px; line-height: 44px; text-align: center; color: #fff; padding:; margin:; position: absolute; right: -50px; top:; cursor: pointer; } .layer_con h5 { width: 510px; height: 68px; line-height: 68px; margin: 0 auto; font-size: 24px; color: #208adb; border-bottom: 1px solid #208adb; font-weight: normal; } .layer_main { padding-top: 46px; overflow-y: auto }
$(function() { /*删除--弹框--开始*/ $(".add_deploy").on("click",function(){ layer($(this)); }); function layer(small){ var $con=$(".layer_con").height(); $(".layer_bg").css({"display":"block"}); $(".layer_con").css({"display":"block","margin-top":-$con/2}); } $(".close,.layer_cancel").on("click",function(){ $(this).parents(".layer_con").css("display","none"); $(".layer_bg").css("display","none"); }); /*删除--弹框--结束*/ });
弹出框--self的更多相关文章
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
- angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...
- 【代码笔记】iOS-自定义弹出框
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...
- Android----消息弹出框
关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- Visual Studio 打开解决方案后 弹出框显示 "正在打开文件..." 迟迟没反应 的解决方法
Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- angularjs 弹出框 $modal 参数(转)
angularjs 弹出框 $modal $modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用 ...
随机推荐
- 改变HTML
改变HTML 1.改变HTML输出流 JavaScript可以创建动态的HTML内容.(注意:不要在加载文档后使用document.write(),这会覆盖文档.) <%@ page langu ...
- 复旦大学2013--2014学年第一学期(13级)高等代数I期末考试第七大题解答
七.(本题10分)设 \(A\) 为数域 \(K\) 上的 \(n\) 阶非异阵, 证明: 对任意的对角阵 \(B\in M_n(K)\), \(A^{-1}BA\) 均为对角阵的充分必要条件是 \ ...
- SqlSever基础 substring 从指定位置开始,截取指定长度的字符串
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- GZFramwork快速开发框架演练之会员系统(二)添加字典模块
开始前请先阅读 GZFramwork快速开发框架之窗体设计说明 第一步:准备模块图片 图片为2张大小分别为16x16和32x32,放在\Debug\images目录下 因为会员管理模块并不多 ...
- 【转载】ogre内存管理
原文:ogre内存管理 OGRE内存分配策略相关文件及简述 OGRE提供了自己的内存分配策略,甚至为STL容器提供了新的分配策略,相关文件及简述如下: OgreMemoryAllocatedObjec ...
- Q查询
一.Complex lookups with Q objects(Q对象的复杂查询) 仅仅靠单一的关键字参数查询已经很难满足查询要求.此时Django为我们提供了Q查询: class Q 1.Q对象( ...
- Django的Many-to-Many(多对多)模型
Django的Many-to-Many(多对多)模型 日期:2012-05-05 | 来源:未知 | 作者:redice | 人围观 | 1 人鼓掌了! 鲲鹏Web数据抓取 - 专业Web ...
- Servlet&jsp基础:第四部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- wordpress中文标签无法访问的解决方法
wordpress中文标签无法访问的解决方法 爱好 2年前 (2014-05-29) 7,601 8 当博客从华夏名网转移到阿里云之后,发现了不少问题,其中一个就是wordpress中文标签无 ...
- WPF GroupBox样式
来源:http://code.msdn.microsoft.com/WPF-GroupBox-Style-1d9df7c5/ 效果: XAML CODE: <Window xmlns=" ...