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%; } }
点击弹出模态框,超实用