弹出框--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:一个作用 ...
随机推荐
- Python3基础 print 中字符串乘以数字,重复输出多次
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- nohup不输出日志信息的方法,及linux重定向学习
起因 最近使用nohup创建了一个后台进程,默认日志输出到了nohup.out文件中,程序跑起来也就没再管,过了大约一周,发现硬盘空间不够了,于是查找原因,发现这个nohup.out文件已经到了70G ...
- 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...
原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...
- bam/sam格式说明
在SAM输出的结果中每一行都包括十二项通过Tab分隔,从左到右分别是: 1 序列的名字(Read的名字) 2 概括出一个合适的标记,各个数字分别代表 1 序列是一对序列中的一个 2 比 ...
- win7删除IE图标方法-----(注册表找不到对应的IE项)
删除个IE图标费了半天事,硬是找不到网上说的那个 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Desk ...
- 泰信---->20131025~20131101(周计划安排)
学习java相关知识计划安排: [前期复习阶段] (一)熟悉java相关语言基础. (二)搭建一个纯web项目工程,实现增加,删除,修改,查询以及分页...功能. (三)熟悉jboss的使用和相关配置 ...
- web设计经验<六>令网站看起来不专业的10个设计误区
不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多.退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受.每天大家所浏览的大量的网站,已经从 ...
- mysql 主主复制的配置流程
1.先关闭B,把A的数据导出来,mysqldump -hlocalhost -uroot -p123456 --database ibprpu >ibprpu.sql2.关闭A,启动B,进入my ...
- 26个Jquery使用小技巧
下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素 ...
- 题目:在泛型为Integer的容器内添加一个字符串.
这个题目有两种解法,第一种利用反射来解决: //ArrayList<Integer> list = new ArrayList<Integer>(); //在这个泛型为Inte ...