弹出框--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:一个作用 ...
随机推荐
- [cdoj1380] Xiper的奇妙历险(3) (八数码问题 bfs + 预处理)
快要NOIP 2016 了,现在已经停课集训了.计划用10天来复习以前学习过的所有内容.首先就是搜索. 八数码是一道很经典的搜索题,普通的bfs就可求出.为了优化效率,我曾经用过康托展开来优化空间,甚 ...
- VC++ 线程同步 总结
注:所谓同步,并不是多个线程一起同时执行,而是他们协同步调,按预定的先后次序执行. 与线程相关的基本函数包括:CreateThread:创建线程CloseHandle:关闭线程句柄.注意,这只会使指定 ...
- SqlSever基础 datediff 计算两个时间相差多少年份
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- C#实例
输出 Console.WriteLine("Hello, World!"); //输出Hello, World! 输出输入的内容 string strName; //声明一个str ...
- winform继承窗体,无法修改父窗体控件问题处理笔记
问题描述: 一个窗体集成父窗体,发现无法直接修改父窗体的控件,比如修改大小等,父窗体控件已经设置为public,如果做成一个dll被引用无此问题 特征: 不禁使父窗体控件,就算新加一个控件也会这样:鼠 ...
- 当插入数据失败时,防止mysql自增长字段的自增长的方法
问题描述: 当mysql设置了自增长字段时(注意:一个表中只能设置一个自增长字段,可以不是主键,但必须是键 ),如果插入数据失败,那么自增长字段仍然会占用这个自增长值,再次成功插入数据时就会造成断层. ...
- 502 Proxy Error The proxy server received an invalid response from an upstream server
Proxy Error The proxy server received an invalid response from an upstream server. The proxy server ...
- Android 测试工具
有时候会发现给手机烧入的信息里少了某一些文件,比如一个图标,或者一个mp3文件之类的等等,为此做了一个小工具检查指定手机里面是否包含相应的文件. 通过程序执行手机的命令来操作手机,感觉还挺有意思的. ...
- hdu 4123 Bob’s Race 树的直径+rmq+尺取
Bob’s Race Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Probl ...
- Android ActionBar以及menu的代码设置样式
menu部分xml代码 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android= ...