bom案例2-弹出层
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
padding: 0px;
margin: 0px;
}
.login {
width: 512px;
height: 280px;
position: absolute;
border: #ebebeb solid 1px;
left: 50%;
right: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
margin-left: -256px;
margin-top: 140px;
display: none;
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
display: none;
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login" >
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg" ></div>
<script>
// 显示登录框和遮盖层
var login = document.getElementById('login');
var bg = document.getElementById('bg');
//1 点击按钮，弹出登录框和遮盖层
var link = document.getElementById('link');
link.onclick = function () {
login.style.display = 'block';
bg.style.display = 'block';
return false;
} // 2 点击关闭按钮，隐藏 登录框和遮盖层
var closeBtn = document.getElementById('closeBtn');
closeBtn.onclick = function () {
// 隐藏 登录框和遮盖层
login.style.display = 'none';
bg.style.display = 'none';
} // 3 拖拽
var title = document.getElementById('title');
title.onmousedown = function (e) {
// 鼠标按下，求鼠标在盒子中的位置
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop; document.onmousemove = function (e) {
// 鼠标移动的时候， 盒子的坐标
var loginX = e.pageX - x;
var loginY = e.pageY - y; login.style.left = loginX + 256 + 'px';
login.style.top = loginY - 140 + 'px';
}
} document.onmouseup = function () {
// 移除鼠标移动的事件
document.onmousemove = null;
}
</script>
</body>
</html>
bom案例2-弹出层的更多相关文章
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
- Lyaer 单弹出层获取数据
案例完整代码如下 var cls = layer.open({ title: "请选择被换班人", type: 2, ...
- js进阶 11-20 弹出层如何制作
js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 关于淘宝店铺装修弹出层popup的记录
小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- zDiaLog弹出层
zDiaLog弹出层 立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...
随机推荐
- Adversarial Examples Are Not Bugs, They Are Features
目录 概 主要内容 符号说明及部分定义 可用特征 稳定可用特征 可用不稳定特征 标准(standard)训练 稳定(robust)训练 分离出稳定数据 分离出不稳定数据 随机选取 选取依赖于 比较重要 ...
- [python]MergeTxt按列合并同一个文件下多个txt文件
开发需求:应项目需要,要将记录成txt的实验数据进行按列合并(也即为不同文件上下合并),从而进行机器学习训练. 实验数据类似如此 模拟验证数据 1.txt *****1***** abcdefghij ...
- 使用 DDL 语句分别创建仓库表、供应商表、产品表和入库表，并对其进行操作
查看本章节 查看作业目录 需求说明: 使用 DDL 语句分别创建仓库表.供应商表.产品表和入库表 使用 DML 语句分别新增一条仓库表.供应商表.产品表和入库表记录 使用 DML 语句更新满足指定条件 ...
- centos7 自动交互expect 安装使用
1.安装 https://www.cnblogs.com/rocky-AGE-24/p/7256800.html 安装expect命令 两种方式yum安装 yum -y install expect ...
- if结构题目记录
1.使用if结构实现:若年龄够7岁或者年龄够5岁并且性别为男,就可以搬动桌子 import java.util.Scanner; /** * 使用if结构实现:若年龄够7岁或者年龄够5岁并且性别为男, ...
- 两张Number()函数图和Boolean()函数图
- Easticsearch概述(ES、Lucene、Solr)一
ES是在Lucene的基础上实现的 1.Lucene全文检索 lucene是一个全文搜索框架,而不是应用产品.因此它并不像http://www.baidu.com/或goolge Destop 那么拿 ...
- 【Java】简单了解网络编程
文章目录 网络编程 网络编程中有两个主要的问题 网络编程中的两个要素 通信要素一:IP和端口号 实例化InetAddress 两个常用方法 端口号 通信要素二:网络通信协议 实现TCP的网络编程 例子 ...
- AVD模拟器怎么配置上网
转自:http://blog.csdn.net/you_jinjin/article/details/7228303 方法一 首先,Windows下,配置Adroid环境变量(Win7为例) 1.桌面 ...
- 在pyqt5中展示pyecharts生成的图像
技术背景 虽然现在很少有人用python去做一些图形化的界面,但是不得不说我们在日常大部分的软件使用中都还是有可视化与交互这样的需求的.因此pyqt5作为一个主流的python的GUI框架地位是非常重 ...