html好看的模块框,超好看的模态框

h4 {

margin-left:20px;

color:white;

}

p {

text-align:center;

}

.btn {

width:100px;

height:35px;

border-radius:5px;

font-size:16px;

color:white;

background-color:cornflowerblue;

}

.btn:hover,.btn:focus {

background-color:#95b4ed;

}

.modal {

display:none;

width:100%;

height:100%;

position:fixed;

left:0;

top:0;

z-index:1000;

background-color:rgba(0,0,0,0.5);

}

.modal-content {

display:flex;

flex-flow:column nowrap;

justify-content:space-between;

width:50%;

max-width:700px;

height:auto;

max-height:500px;

margin:100px auto;

border-radius:10px;

background-color:#fff;

-webkit-animation:zoom 0.6s;

animation:zoom 0.6s;

resize:both;

overflow:auto;

}

@-webkit-keyframes zoom {

from {

-webkit-transform:scale(0)

}

to {

-webkit-transform:scale(1)

}

}@keyframes zoom {

from {

transform:scale(0)

}

to {

transform:scale(1)

}

}.modal-header {

box-sizing:border-box;

background-color:rgb( 23,65,91);

border-bottom:1px solid #ccc;

display:flex;

justify-content:space-between;

align-items:center;

}

.close {

color:#b7b7b7;

font-size:30px;

font-weight:bold;

margin-right:20px;

transition:all 0.3s;

}

.close:hover,.close:focus {

color:#95b4ed;

text-decoration:none;

cursor:pointer;

}

.modal-body {

padding:10px;

font-size:16px;

box-sizing:border-box;

height:auto;

}

.modal-footer {

box-sizing:border-box;

/* border-top:1px solid #ccc;

*/ display:flex;

padding:15px;

justify-content:flex-end;

align-items:center;

}

.modal-footer button {

width:60px;

height:35px;

padding:5px;

box-sizing:border-box;

margin-right:10px;

font-size:16px;

color:white;

border-radius:5px;

background-color:cornflowerblue;

}

.modal-footer button:hover,.modal-footer button:focus {

background-color:#95b4ed;

cursor:pointer;

}

@media only screen and (max-width:700px) {

.modal-content {

width:80%;

}

}