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';

};