弹出框--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:一个作用 ...
随机推荐
- 高通、猎户机型Android典型bootloader分析
1.bootloader是什么? 简单地说,bootloader 就是在操作系统内核运行之前运行的一段小程序.通过这段小程序,我们可以初始化硬件设备.建立内存空间的映射图,从而将系统的软硬件环境带到一 ...
- C#大纲
输入输出--数据类型--变量与常量--运算符表达式--语句(顺序.分支.循环)--数组--函数--结构体一.输入与输出.Console.ReadLine();Console.WriteLine();C ...
- js获取鼠标位置
1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...
- UVA 607 二十二 Scheduling Lectures
Scheduling Lectures Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submi ...
- hdu 1700 Points on Cycle(坐标旋转)
http://acm.hdu.edu.cn/showproblem.php?pid=1700 Points on Cycle Time Limit: 1000/1000 MS (Java/Others ...
- 获取Token不完整问题
有时会遇到获取Token只能获取一半的问题,明明有两个Cookie,但只获取到一个,这个是因为301重定向跳转设置问题,设置为True就可以获取到完整的Token了. myHttpWebRequest ...
- Visual C#两分钟搭建BHO IE钩子(转)
摘自:http://www.cnblogs.com/mvc2014/p/3776054.html 微软在1997年正式推出Browser Helper Object (BHO), 使程序员能够更好的对 ...
- hdu 5950 Recursive sequence 矩阵快速幂
Recursive sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...
- Python基础学习笔记(五)常用字符串内建函数
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-strings.html 3. http://www.liaoxu ...
- Oracle中synonym和index
笔记: Oracle-同义词--通过用户名(模式名).表名 --授权:grant create synonym to test1(system用户下授权)) --私有 creat ...