<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> <style> body{margin: 0; padding: 0; height: 9999px; Popup__wrapper {position: fixed; top: 0; left: 0; right: 0; bottom: 0; Background: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; justify-content: center; align-items: center; } .popup { box-sizing: border-box; width: 670px; height: 300px; background: #fff; text-align: center; padding: 70px 10px 20px 10px; border-radius: 4px; } .popup__title{ font-size: 30px; font-weight: 600; color: #004165; margin-bottom: 20px; } .popup__btnWrapper { width: 50%; margin: 0 auto; display: flex; justify-content: space-between; } .popup__text{ font-size: 20px; margin-bottom: 50px; } button{ width: 154px; cursor: pointer; border-radius: 4px; line-height: 45px; font-weight: 600; } .popup__yesBtn { color: #fff; background-color: #007dba; border: 1px solid #006ba1; } </style> </head> <body> <div class="popup__wrapper"> <div class="popup"> <div class="popup__title">Confirmation</div> <div class="popup__text">Are you sure you want to do this action? </div> <div class="popup__btnWrapper"> <button class="popup__yesBtn">Yes</button> <button class="popup__noBtn">No</button> </div> </div> </div> </body> </html>Copy the code