Estoy tratando de cambiar el aspecto de los mensajes de error de Woocommerce en la página de pago. Quiero que sean como un modal, fijos en el centro de la pantalla, con un fondo oscuro. Tengo este CSS:

 .woocommerce-error{ position:fixed; background: white; padding: 1rem; top:50%; left:50%; z-index:1000; } .woocoomerce-notices-wrapper{ position:fixed; background: rgba(51, 51, 51, .5); top:0; left:0; height:100%; width:100%; z-index:999; }

El problema es que ahora no hay forma de que el usuario "elimine" el mensaje y el envoltorio del aviso. Por lo general, con un modal, puede hacer clic en cualquier lugar de la pantalla y desaparecerá. ¿Cómo puedo convertir el envoltorio de aviso en un modal para que desaparezca (junto con el mensaje de error) cuando hace clic en cualquier lugar de la pantalla?