.message-box{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; } .message-box, .message-box-main, .btn{ transition: all 0.5s; -ms-transition: all 0.5s; } .message-box.show{ visibility:visible; } .message-box.show .message-box-main{ top: 25%; opacity: 1; } .message-box-main{ width: 500px; background-color: #fff; position: absolute; top: 15%; left: 50%; margin-left: -250px; border-radius: 3px; overflow: hidden; opacity: 0; }