I am trying to change the look of the Woocommerce error messages on the checkout page. I want them to be like a modal, fixed in the center of the screen, with a dark background. I have this 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;
}

The problem is that there now is no way for the user to "remove" the message and the notice wrapper. Usually, with a modal, you can click anywhere on the screen and it will disappear. How can I make the notice-wrapper into a modal so that it disappears (along with the error message) when you click anywhere on the screen?