html 自定义模态框,自定义对话框、模态框
致敬iphoneX的小刘海....
自定义模态框
body{
text-align: center;
}
#modalBg{
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
margin: auto;
display: none;
}
#modal{
min-width: 30%;
background-color: white;
border-radius: 5px;
position: absolute;
}
button{
width: 50%;
height: 50%;
background-color: white;
}
#modal div{
width: inherit;
margin-bottom: 1%;
padding: 0 3%;
}
#modal input{
float: left;
width: 81%;
height: 1.7em;
outline: none;
margin: 0;
padding: 0;
}
#modal button{
position: relative;
width: 17%;
outline: none;
border: none;
background-color: rgba(129,186,255,1);
color: white;
height: 2em;
margin: 0;
left: -0.5%;
}
#modal button:active{
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
background-color: rgba(129,186,255,0.7);;
}
#modal .modal-title{
width: inherit;
text-align: center;
background-color: rgba(129,186,255,1);
color: white;
font-size: 1.3em;
margin-bottom: 4%;
margin-right: 4.2%;
margin-left: 3%;
}
#modal .modal-title:active{
background-color: rgba(129,186,255,0.8);
}
.modal-Btn{
margin-top: 8%;
text-align: right;
}
#modal .modal-Btn button{
width: 5em;
margin-right: 0.3%;
}
显示模态框
确定
确定
确定
取消
确定
window.onload = function () {
$('#btn').click(function () {
$('#modalBg').css('display','block');
initModal();
dragModal();
});
$('.modal-Btn button:first-child').click(function () {
$('#modalBg').css('display','none');
});
};
function initModal() {
//让模态框每次启动的时候都在屏幕正中间!
var t = 0.5*parseInt($('#modalBg').css('height')) - 0.5*parseInt($('#modal').css('height'));
var l = 0.5*parseInt($('#modalBg').css('width')) - 0.5*parseInt($('#modal').css('width'));
$('#modal').css('left',l+'px');
$('#modal').css('top',t+'px');
}
function dragModal() {
//让模态框可拖拽
var modal = document.getElementById('modal');
modal.οndragstart=function(e){
console.log('事件源p3开始拖动');
offsetX= e.offsetX;
offsetY= e.offsetY;
console.log('\n 启动 offsetX = ' + offsetX);
console.log('\n 启动 offsetY = ' + offsetY);
};
modal.οndrag=function(e){
console.log('事件源p3拖动中');
var x= e.pageX;
var y= e.pageY;
console.log(x+'-'+y);
//drag事件最后一刻,无法读取鼠标的坐标,pageX和pageY都变为0
if(x==0 && y==0){
return; //不处理拖动最后一刻X和Y都为0的情形
}
x-=offsetX;
y-=offsetY;
modal.style.left=x+'px';
modal.style.top=y+'px';
};
}
外加赠送一个有弹性的水球,同时也可以移动。
水球
#menuBox{
position: absolute;
width: 8em;
height: 8em;
right: 45%;
bottom: 45%;
}
#menu{
position: absolute;
background: radial-gradient(circle at 30px 5px,rgba(142,197,255,0.1), rgba(21,43,79,1));
border-radius:100%;
left: 1.5em;
top: 1em;
width: 5em;
height: 5em;
animation: spin 6s linear infinite;
}
#shadow{
background: radial-gradient(rgba(0,0,0,0.6),rgba(178,178,178,0.6), rgba(255,255,255,0.73),rgba(255,255,255,0.3));
width: 100%;
min-height: 0.6em;
position: absolute;
top: 8em;
border-radius: 50%;
animation: spin 6s linear infinite;
}
@keyframes spin{
0% {
transform:scaleY(1) scaleX(1.5);
}
50%{
transform:scaleY(1.5) scaleX(1);
}
100%{
transform:scaleY(1) scaleX(1.5);
}
}
var menuBox = document.getElementById('menuBox');
menuBox.οndragstart=function(e){
offsetX= e.offsetX;
offsetY= e.offsetY;
};
menuBox.οndrag=function(e){
var x= e.pageX;
var y= e.pageY;
if(x==0 && y==0)
return;
x-=offsetX;
y-=offsetY;
menuBox.style.left=x+'px';
menuBox.style.top=y+'px';
};
html 自定义模态框,自定义对话框、模态框相关推荐
- Unity GalGame插件 GalForUnity自定义对话框选项框
自定义对话框选项框等 游戏中出现的对话框,选项框是由ShowPlotView管理的,在未来,这个类或许会变更为PlotViewController GameSystem附加后会有一个默认UI,当然,您 ...
- 自动关闭模态框_Dialog 弹出框
介绍 弹出模态框,常用于消息提示.消息确认,或在当前页面内完成特定的交互操作. 弹出框组件支持函数调用和组件调用两种方式. 函数调用 Dialog 是一个函数,调用后会直接在页面中弹出相应的模态框. ...
- bootstrap 模态框无法使用_模态窗 Modal Window - 产品中的??注意力设计
本文是「经典交互模式」系列第二篇,前文回顾:面包屑导航 Breadcrumbs Trail 全文目录 什么是模态窗 模态窗的使用问题 模态框应用实践 什么是模态窗 Modal Window 我们在各种 ...
- 三个文本框自定义数字抽奖机
三个文本框自定义数字抽奖机: 代码下载地址: 点击打开链接
- CSS/HTML复选框自定义样式
CSS/HTML复选框自定义样式 话不多说 直接上代码 HTML <div class="circle-check"><input type="chec ...
- 自定义 FlowLayout流式布局搜索框 加 GreenDao存取搜索记录,使用RecyclerView展示
输入框布局的shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android ...
- Echarts提示框自定义显示百分号
Echarts提示框自定义显示百分号 tooltip: {trigger: 'axis',formatter: '{b0}<br/>' +'<span style="dis ...
- HQChart实战教程24 - 自定义K线画图工具设置框(线段类)
HQChart实战教程24 - 自定义K线画图工具设置框 画图工具 步骤 监听画图工具选中事件 点击事件回调 1. 回调参数说明 2. 图形实例类说明 Symbol Period Vaule Line ...
- vue element Transfer 穿梭框 自定义数
1.Transfer 穿梭框自定义数据时有两种方式: (1)使用"render-content 函数"方式 (2)使用" slot-scope="{ optio ...
- Element下拉框自定义搜索方法
Element下拉框自定义搜索方法 根据官方文档的api,自定义element的select组件输入提示需要配置filter-method(自定义搜索方法)和filterable(是否可搜索),htm ...
最新文章
- linux c 文件描述符 得到 文件名
- 20145202、20145225、20145234 《信息安全系统设计基础》实验五 简单嵌入式WEB 服务器实验...
- iOS开发笔记[13/50]:解决SenTestingKit/SenTestingKit.h: No such file or directory问题
- arm的存储保护单元MPU
- Linux学习:shell命令(文件和目录相关)
- Handler 源码解析(Java 层)
- 项目管理办公室 PMO
- 【干货】完美日记增长策略深度研究报告.pdf(附下载链接)
- java程序设计_Java程序设计-类和对象(笔记)
- 昨晚直播后续,关于职场人的能力
- 如何在线查看某个地方的高程值
- 微型计算机原理与接口技术朱金钧课后答案,微型计算机原理及应用技术 第3版...
- c语言课后练习题第四章
- 金蝶K3WISE盘点机PDA扫码入库仓库条码管理,外购入库单
- react里面点击按钮触发复制文本功能
- 如何删除下一页分节符_怎么去掉分节符下一页
- 微信小程登录功能和获取手机号
- SMAA算法详解 - SMAADetectHorizontalCornerPattern
- 全国计算机竞赛保送清华,竞赛入清华_是不是如果获得全国各学科竞赛的一等奖就能保送清华_淘题吧...
- 数字货币或将消灭银行 未来3至5年,银行业可能将崩溃?
热门文章
- 名帖168 李邕 行书《出师表》
- 浏览器的 User-Agent是什么
- 多个中通快递的物流情况是怎么批量查询并保存的
- 计算机学院李成伟,河南科技学院校长李成伟一行看望慰问我院招生录取工作人员...
- 吴恩达AI FOR Everyone|人工智能入门笔记|
- VR分享会邀请函 | 如何利用VR影像创造商业应用新价值?
- 香橙派Zero2电视盒子开发板连接HDMI如何修改分辨率
- sipjs 保存mp4文件_微信视频号视频怎么下载,视频号视频怎么保存到手机
- 《管理的实践》读书心得
- ubuntu下rsync两个服务器同步文件