致敬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';
};
