html5鼠标载入弹出信息框,js实现自定义弹出对话框(弹窗)可拖拽
在日常的开发中,我们经常需要点击一个按钮提供交互,弹出对话框,输入一些信息。
本篇文章的代码,另外添加了背景黑色遮罩以及可以任意拖拽对话框。使用到的js知识点:onclick、onmousedown、onmouseup、onmousemove、鼠标位置
效果图gif:
可任意拖拽:
细节:
上代码:
index.html
Document
关闭
输入账号:
输入密码:
var open = my$('open');
var box = my$('box');
var hidden = my$('hidden');
var close = my$('close');
open.onclick = function () {
box.style.display = 'flex';
hidden.style.display = 'block';
}
close.onclick = function () {
box.style.display = 'none';
hidden.style.display = 'none';
// 关闭后恢复box到原来的默认位置
box.style.top = '200px';
box.style.left = '';
}
box.onmousedown = function (e) {
e = e || window.event;
// 盒子的位置
var x = getPage(e).pageX - box.offsetLeft;
var y = getPage(e).pageY - box.offsetTop;
document.onmousemove = function (e) {
e = e || window.event;
box.style.left = getPage(e).pageX - x + 'px';
box.style.top = getPage(e).pageY - y + 'px';
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
index.cssbody {
background-color: #324266;
}
#container {
display: flex;
justify-content: center;
}
/* 打开按钮 */
#open {
background-color: #52699e;
border: none;
height: 30px;
width: 200px;
border-radius: 10px;
color: #fff;
outline: none;
cursor: pointer;
}
#open:hover {
background-color: #4a5f8f;
}
/* 背景遮罩 */
#hidden {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000000;
opacity: 0.3;
display: none;
}
/* 盒子 */
#box {
color: #fff;
width: 400px;
height: 200px;
background-color: #40527e;
display: none;
flex-direction: column;
border-radius: 10px;
align-items: center;
padding-top: 50px;
box-sizing: border-box;
position: absolute;
top: 200px;
cursor: move;
}
/* 关闭按钮 */
#close {
position: absolute;
top: 5px;
right: 5px;
font-weight: normal;
display: block;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
border-radius: 20px;
color: #7a9ae4;
}
#close:hover {
background-color: #52699e;
cursor: pointer;
}
/* 输入框 */
#box input {
width: 200px;
height: 25px;
border-radius: 25px;
border: none;
outline: none;
padding-left: 20px;
background-color: #536a9e;
color: #fff;
}
/* 改变placeholder的值 */
#box input::-webkit-input-placeholder {
color: rgb(255, 255, 255);
opacity: 0.4;
}
#box input:first-child {
margin-bottom: 20px;
}
/* 登录按钮 */
#box #login {
cursor: pointer;
width: 300px;
height: 30px;
background-color: #02a0a0;
}
#box #login:hover {
background-color: #019191;
}
common.jsfunction my$(id) {
return document.getElementById(id);
}
// 获取鼠标在页面的位置,处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
html5鼠标载入弹出信息框,js实现自定义弹出对话框(弹窗)可拖拽相关推荐
- layer弹出信息框API
layer API之键值(仅在需要时配置,未配置的会用默认) 键 : 值 描述 skin : 0 层的皮肤编号,值为整数型.目前默认只提供一种皮肤,当你按照样式规则新增皮肤时(详见skin/layer ...
- 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能 前言 概述 技术介绍 实现过程 插件安装 引用组件 初始化组件 实现效果 简单理解 使用d3创建一个svg 在svg中提添 ...
- HTML配合js制作弹框,弹出信息框展示后台内容
最近,应公司要求需要制作一个弹出框,需求是在鼠标停留在字段上,就会弹出一个信息框弹出从后台查出来的内容.因为本猿是后端开发,对于前端的东西是半桶水,一知半解,它认识我我不认识它.所以在此记录一下Dem ...
- layer的msg函数_layer弹出信息框API
键 : 值 描述 skin : 0 层的皮肤编号,值为整数型.目前默认只提供一种皮肤,当你按照样式规则新增皮肤时(详见skin/layer.css),你可配置该参数. type : 0, 层的类型.0 ...
- html点击图片弹出模态框,JS实现图片点击后出现模态框效果
JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...
- ajax弹出提示框,Ajax环境下弹出提示框
在普通的ASP.NET环境中,我们要想在WEB窗体上弹出一个对话框,经常用到的是如下代码: Response.Write(""); 然而在Ajax的环境中却不能使用上述的代码,否则 ...
- js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果 左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现 由于需要使用树形插件zTree,这个插件是依赖于jque ...
- D3.js实现人物关系图谱有移动、拖拽、放大功能
原文链接:https://www.jianshu.com/p/d768505cab78 在此基础上加了点东西 实现了关系图的移动.拖拽.放大功能.以及数据的分类等等.代码稍显繁琐,另外案例中的d3.j ...
- JS的平凡之路--简易的图片拖拽排序
由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable ...
- 百度地图android弹出窗口,【代码】Android百度地图点击弹出信息框
分享给大家一篇技术文章,还有很多不足之处,欢迎吐槽!期待各位android爱好者,加入android交流群:278744577,加群请验证:qy88,共同探讨! 如图: 我是在百度的demo上改的主要 ...
最新文章
- PHP5 mysqli 教程
- 开发日记-20190822 关键词 读书笔记《Unix环境高级编程(第二版)》《掌控习惯》DAY 2
- python的集合类型——字符串、列表、元组、字典
- 说说 Spring 的事务同步管理器
- LeetCode Smallest Range
- 更换锁定计算机图片,电脑锁屏图片怎么设置
- JeecgBoot手机端安装配置流程
- [Ajax] Ajax的基本用法
- loadrunner11基础使用
- MyCat分布式数据库集群架构工作笔记0015---高可用_负载均衡_Mycat双主双从读写分离
- Tiktok培训可以去学习吗?
- OpenJDK8在LINUX上,输入法候选框无法正确定位
- Python开发第一步的环境搭建
- CMM3和CMMI4的差别--过程域
- 根据工资计算税费html,税后工资计算器2018 个人所得税excel计算公式
- 初探Watir --- Ruby 自动化测试框架
- 编译linux搭建vs2015,使用Vs2015开发linux(centos7)程序
- Longest Increasing Subsequence
- 金丹期前期:1.2、python语言-python的基本元素:变量及命名规则、数据类型及转换、运算符、输入输出
- Detectron2的使用指南