JavaScript+CSS实现模态框效果
本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码，供大家参考，具体内容如下
发现的问题
1）鼠标按下后拖动的瞬间，光标会脱离模态盒子跑到外面
2）鼠标弹起事件不起作用
解决的思路
首先是因为代码里有用到offsetLeft和offsetTop这两个属性，所以考虑是不是模态框的定位出现了问题 。
又：设置关闭标签设置了绝对定位，那么loginBox作为其父级元素我将其设置为相对定位。
各个类型定位的介绍：
1.静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致（不是定位元素）
2.相对定位: position: relative;相对于该元素在文档流中的原始位置进行偏移
3.绝对定位: position: absolue;相对于它的祖先中离它最近的”定位元素”的位置发生偏移（如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位）
4.固定定位: position: fixed; 是绝对定位的一个特例,它始终相对于html定位
定位元素：只要这个元素中有position: relative;或者 position:absolute;就称为定位元素
由上可看出，相对定位，指的是相对于该元素在文档流中的原始位置进行偏移而不是相对于html，所以loginBox不能设置为相对定位。可以用绝对定位或固定定位，两者均可。
另外，需要注意使用top、left定位后，则margin-top、margin-left产生同方向相加的位移效果，margin-bottom、margin-righ产生无任何效果的margin空间。所以保留margin: 100px auto;时效果还是会有些奇怪，注释起来了就好了。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: white;
}
.dianji {
height: 50px;
width: 300px;
font-size: 20px;
margin: 10px auto;
cursor: pointer;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin: 100px auto; */
box-sizing: border-box;
height: 200px;
width: 370px;
background-color: white;
text-align: center;
display: none;
}
.loginBox>span {
position: absolute;
top: -15px;
right: -15px;
height: 30px;
width: 30px;
font-size: 8px;
line-height: 30px;
border-radius: 50%;
background-color: white;
border: 1px solid #cccccc;
}
.loginBox h5 {
/* position: relative; */
margin-bottom: 18px;
font-weight: normal;
font-size: 16px;
cursor: move;
}
.uname {
margin: 18px 0 15px 15px;
height: 25px;
line-height: 25px;
}
.uname span,
.psw span {
font-size: 12px;
}
.uname input,
.psw input {
height: 25px;
width: 230px;
font-size: 12px;
outline: none;
}
.loginBox button {
margin: 20px;
width: 190px;
height: 30px;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div class="dianji">点击，弹出登录框</div>
<div class="loginBox">
<span class="close">关闭</span>
<h5>登录会员</h5>
<div class="uname"><span>用户名：</span> <input type="text" placeholder="请输入用户名"></div>
<div class="psw"><span>登录密码：</span> <input type="password" placeholder="请输入密码"></div>
<button>登录</button>
</div>
<script>
var dianji = document.querySelector('.dianji');
var loginBox = document.querySelector('.loginBox');
var close = document.querySelector('.close');
var bodyy = document.body;
var move_area = document.querySelector('h5');
dianji.addEventListener('click', function() {
bodyy.style.backgroundColor = '#ccc';
loginBox.style.display = 'block';
})
close.addEventListener('click', function() {
bodyy.style.backgroundColor = 'white';
loginBox.style.display = 'none';
})
move_area.addEventListener('mousedown', function(e) {
var x = e.pageX - loginBox.offsetLeft;
var y = e.pageY - loginBox.offsetTop;
console.log('x=' + x + ' y=' + y);
document.addEventListener('mousemove', move)
function move(e) {
loginBox.style.left = e.pageX - x + 'px';
loginBox.style.top = e.pageY - y + 'px';
}
//鼠标弹起，就是让鼠标移动时间解除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS+CSS实现网页加载中的动画效果
本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下 需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框 页面开始发送Ajax请求数据时,显示模态框 请求完成,隐藏模态框 下面我们通过Django新建一个web应用,来简单实践下 实践 1.新建一个Django项目,创建应用app01, 配置好路由和static,略.将gif动图放到静态文件夹下,结构如下: 2.视图中定义一个函数,它返回页面test.
-
js+css实现换肤效果
本文实例为大家分享了js+css实现换肤效果的具体代码,供大家参考,具体内容如下 效果图如下: 需求:点击对应小圆点,下面内容颜色跟着改变 主要思路: 1.在css中把对应的样式先写好:2.获取小圆点给它绑定点击事件:3.获取当前点击元素的类名:4.将该类名设置给body: js主要考察的是获取属性值和设置属性值: <style> *{ margin:0; padding:0; list-style: no
-
JavaScript驾驭网页-CSS与DOM
推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> span.class
-
JavaScript+CSS实现唯美蝴蝶动画
目录 演示 技术栈 源码 对部分蝴蝶的设定 飞动的设置 对蝴蝶形体的设置 演示 技术栈 关于svg标签在svg中关于图形的复用,是通过标签defs来解决的. 举个例子:在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素.结构都是一样的,只是颜色和位置的差别. 关于figure: <figure标签规定独立的流内容(图像.图表.照片.代码等等). <figure元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文档流产生影响. 关于perspective-o
-
JavaScript CSS优雅实现网页多主题风格换肤功能详解
目录 引言 简单列举下一些其它实现方式 CSS variable的实现方式 var() 函数 方案落地 一.和UI设计师沟通好各主题的色阶 二.将各主题色阶抽离为一个字典对象 三.通过js设置style变量 举一反三 1.结合媒体查询 2.结合js业务逻辑 3.存储一些信息 引言 对于网页换肤,例如最常见的深色.浅色风格已经是很常见的一个需求了.一直以来也有很多的实现方案,这里我主要介绍一下基于 CSS variable的实现方式 简单列举下一些其它实现方式 1.把不同风格样式写到不同的类名下面
-
JS+CSS实现自动切换的网页滑动门菜单效果代码
本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code
-
javascript实现移动的模态框效果
本文实例为大家分享了javascript实现移动的模态框效果的具体代码,供大家参考,具体内容如下 页面效果: 点击链接后,弹出登录模态框,点击关闭链接可以关闭模态框,鼠标在模态框标题区域按下后可以拖拽模态框,松开鼠标后,模态框停止移动 实现思路: 1.html.css搭建好页面,设置好模态框内容和样式后,将模态框隐藏:display: none;如果点击弹出模态框后,页面背景色发生改变,可以添加一个遮罩层,将遮罩层也先隐藏 2.给点击后弹出模态框的元素添加点击事件- - -onclick 事件处
-
使用bootstrap插件实现模态框效果
今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.min.js 是压缩后的版本. 我们在使用 bootstrap 的
-
JS实现图片点击后出现模态框效果
很多时候我们在浏览图片时,会发现点击图片后,会弹出一个被点击图片的放大图片浮在页面上,占满整个窗口.这就是图片模态框效果. 这个效果可以使用某些js库实现,如bpopupJs.但是在这里我们使用纯js实现,能够更好理解效果原理和实现方法. 一.实现思路 我们点击小图片之后,图片模态框出现,同时图片模态框上有一个关闭按钮和图片的标题. 因此,我们的实现思路就是: 图片模态框有大图片,关闭按钮,图片标题三部分. 将图片模态框隐藏,在点击小图片之后,模态框出现. 点击关闭按钮后,模态框隐藏. 二.HT
-
js实现拖动模态框效果
本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下 1.实现效果: 点击链接,弹出模态框.点击关闭,关闭模态框. 点击标题部分,可以随意移动模态框的位置. 主要是获取鼠标位置. 2.思路: 3.代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
-
JQuery自定义模态框效果
本文实例为大家分享了JQuery自定义模态框效果的具体代码,供大家参考,具体内容如下 重点:基于jQuery ,也可改造成原生模态框 功能: 1.可以自定义模态框的宽高等等一系列css样式:2.关闭.提交都可以执行自定义的回调函数:3.js和html分离,除了部分带了js功能的class不能遗漏之外,其他的都可自行增减 html代码: <div class="dialog-tiya" id="voteModal"> <div class=&
-
JavaScript+CSS无限极分类效果完整实现方法
本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd
-
JavaScript实现拖动模态框
本文实例为大家分享了JavaScript实现拖动模态框的具体代码,供大家参考,具体内容如下 案例:模态框拖拽 弹出框,我们也称为模态框. 1.点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层.2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层.3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动.4.鼠标松开,可以停止拖动模态框移动. 案例分析 ①点击弹出层,模态框和遮挡层就会显示出来display:block;②点击关闭按钮,模态框和遮挡层就会隐藏起来display
-
基于JavaScript实现弹出框效果
弹出框在网站页面中是必不可少的一部分,今天借助我们平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅! 首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q
-
JavaScript实现百度搜索框效果
最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <
-
css实现气泡框效果(实例加图解)
前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等.下面我们来学习下使用html+css来实现这种效果! 如下效果: and 我们可以来分析下:要实现这种效果 无外乎就是一个矩形和一个小三角形 然后三角形定位上去就可以了,那么我们怎么样通过css来制作小三角形呢? 一:首先我们来看看css border属性,当