html,
body {
    height: 100%;
    overflow-x: hidden;
}

.drag_modal {
    position: fixed;
    top: 0;
    padding: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity .3s;
    opacity: 0;
}

.drag_content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    box-sizing: border-box;
    width: 360px;
    background: rgba(255, 255, 255, 1);
    font-size: 14px;
    border: 1px solid #AAA;
    transition: opacity .3s;
    opacity: 0;
}

.drag_content .drag_head,
.drag_content .drag_foot {
    position: relative;
    box-sizing: border-box;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    background: lightblue;
    font-size: 16px;
    -webkit-user-select: none;
    user-select: none;
    /* cursor: move; */
}

.drag_content .drag_head .drag_close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAIu0lEQVR4Xu2dS5YbRRBFwytg4A0wgc0YswxgMRzmwC6MGcAQDzksAO/BA/AGONWWGrVaVRUZlRWqyHc9dUR+7surlFTt9gvjDwQgMEvgBWwgAIF5AgjC6YDAAgEE4XhAAEE4AxCIEeAGiXGjS4QAgogEzTZjBBAkxo0uEQIIIhI024wRQJAYN7pECCCISNBsM0YAQWLc6BIhgCAiQbPNGAEEiXGjS4QAgogEzTZjBBAkxo0uEQIIIhI024wRQJAYN7pECCCISNBsM0YAQWLc6BIhgCAiQbPNGAEEiXGjS4QAgogEzTZjBBAkxo0uEQIIIhI024wRQJAYN7pECCCISNBsM0YAQWLc6BIhgCAiQbPNGAEEiXGjS4QAgogEzTZjBBAkxo0uEQIIIhI024wRQJAYN7pECCCISNBsM0YAQWLc6BIhgCAiQbPNGAEEiXGjS4QAgogEzTZjBBAkxo0uEQIIIhI024wRQJAYN7pECCCISNBsM0YAQWLc6BIhgCAiQbPNGAEEiXGjS4QAgogEzTZjBEYU5Bczex3DQddGAi/N7MPGMQ7VPpogkxxfnQiPtrdDHZwbi/nSzP488X939MV61zfSIbqUY9r/j2b2nRcEdZsITHL8fRrh35EkGUWQNzNvq5Bk07l3NV/KcW74aGavzKz8TTKCIHNynMNCEtc5DxXdkuNSkunt7h+hkQ/SVF2QL8zsvYMlkjggNZYsyTGMJNUFmYJAksaT3aF8kuPtif3acKXPWOnFXySDJGvHtN/fe+UY4tYeRRBukn4CLI0kJccEYiRBkGRfSeTkGFGQsyS/Ot4fD/EWYF8nHkeXlGNUQZCkrzWycowsCJL0kURajtEFQZJtksjLoSAIksQkQY4Tt9G+xZo7DtNzEj64+2RBjgtOKoJwkyCHj8BVlZIgSLJ8RLg5bvBREwRJbkuCHDMvHoqCIMnTw4AcCzerqiBI8ulQIMfKJxNlQdQlQQ7Hx3Z1QVQlQQ6HHCoPCj0olJ6TIIfnRIg9KPQgUZAEOTwnQfRBoQfNyJIgh+cEiD8o9CAaURLk8CTPg0I3pZEkQQ537M8L+RZrHt4IkiDHBjn4FmsdXmVJkGM939UKbpBVRA+/d6vaj8ojx3qurgoEcWEqJYlXjp/M7Fvf9nWrEMSffYWbBDn8eboqEcSF6bHoyJIgR1uWrmoEcWF6UnRESZCjPUdXB4K4MD0rOpIkyBHL0NWFIC5MN4uOIAlyxPNzdSKIC9Ns0T0lQY5t2bm6EcSFabHoHpIgx/bcXCMgiAvTalGmJMixGke/AgTpxzJDEuTol5drJARxYXIX7SkJcrhj6FeIIP1YnkfaQxLk6J+Ta0QEcWFqLuopCXI04+/XgCD9WF6P1EMS5NgvH9fICOLCFC7aIglyhLH3a0SQfiznRopIghz75+KaAUFcmDYXtUjyg5m9dfwnpPx7js2xrA+AIOuMelV4JfnHzD5bmRQ5eqWyMg6CJIE+TeOVZGlVyJGYGYIkwu4gCXIk54UgycA3SIIcd8gKQe4A/UKS383sc8cSkMMBaY8SBNmDqm/M6avc3xDEB+teVQhyH/Le5xyXq+MWuUNWCJIPPSLHeZVIkpwXguQC3yIHkuRm9TAbguRB98rBg8K8TFZnQpBVRF0KvHJMb6G+d/4uYN5udYlmeRAE2R9yixzn35XrfeKOJDvnhyD7Ao7IcV4RkuybjWt0BHFhChVtkQNJQsj7NyFIf6bTiD3kQJJ9smkaFUGacLmKe8qBJC7k+xUhSF+2e8iBJH0zahoNQZpwLRbvKQeS9MupaSQEacI1W5whB5L0yappFARpwnWzOFMOJNmeV9MICNKE61nxPeRAkm2ZNXUjSBOuJ8X3lANJ4rk1dSJIE67H4iPIgSSx7Jq6EKQJ10PxkeRAkvb8mjoQpAnXIeVAkrYMm6oRxI/riDfH9er5AUd/nq5KBHFhOvTNgSS+DENVCLKOrcLNgSTrOYYqEGQZW0U5+EwSUuF2E4LMw6wsB5J0kgRBboMc6cPuSHvpdOz9wyDIc1YjHqgR9+Q/5RsqEeQpvJEP0sh726DAciuC/M9H4QAp7LGrLAjyCafSwVHa62ZZEERLDr7dalRGXRDlV1Plvbs1URaEA6J5e7rlmApVBUEOrS8nmqS4LFYUBDk0nv2EpVAWBDnmjw1sbrBRukE4AOuvqTC6YqQiCMGvy8FXwKI3CHL45UASsRsEOdrlQJILZiO/xUKOuBxIciIwqiDIsV0OJBn0QSFy9JNDXpLRbpBJjveO88F/fumAdFUi+cIzkiDI0X7oWzvkJBlFEORoPerxeilJRhAEOeKHPdrplWQav/QZK734078E5DNH9Jhv6/O8MH00s1dm9m7bVPfrri7IRO6Nmb1eQMgH8v3O15Ik5eUof/1d5D4nyc9m9s1+54ORZ27xIeQYSZBbNwly5Pl7eZMMI8doglxLMsLbx7wjvn2mSZK/qn/muMYw4iGa3m59vT1vRggQeGlmHwJ9h20ZUZDDwmZh9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9QggSL3MWHEiAQRJhM1U9Qj8B/ZPltgaxjsDAAAAAElFTkSuQmCC") no-repeat;
    background-size: 100% 100%;
}

.drag_content .drag_main {
    box-sizing: border-box;
    padding: 10px;
    min-height: 100px;
}

.drag_content .drag_foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #FFF;
}

.drag_content .drag_foot .drag_button {
    box-sizing: border-box;
    margin-left: 10px;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #AAA;
    font-size: 14px;
    color: #000;
    background: lightblue;
}