Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

.modelpopup-btn {
 font-family: 'Rubik', sans-serif;
 background-color: #000;
 border: 1px solid transparent;
 color: #fff;
 font-size: 16px;
 padding: 14px 20px;
 margin-bottom: 25px;
 display: inline-block;
 outline: none;
 cursor: pointer;
 position: fixed;
 left: 50%;
 top: 40%;
 transform: translateX(-50%);
}

/**Typeo CSS End**/
.popupmodel, .popupmodel * {
 --base-fm: 'Rubik', sans-serif;
 --title-size: 30px;
 --base-size: 16px;
 --white-clr: #ffffff;
 --black-clr: #000000;
}

.model-ovelay {
 position: fixed;
 transition: all 0.5s ease 0.5s;
 visibility: hidden;
 opacity: 0;
 width: 100%;
 height: 100%;
 float: left;
 background: rgba(0, 0, 0, 0.4);
 pointer-events: auto;
 top: 0px;
 z-index: 988;
}

.modelclose {
 cursor: pointer;
 float: right;
 font-size: 40px;
 text-align: center;
 line-height: 36px;
 color: var(--black-clr);
 position: absolute;
 right: 10px;
 top: 5px;
 z-index: 1;
}

.popupmodel {
 max-width: 450px;
 width: 100%;
 transition: all 0.5s ease 0s;
 margin: auto;
 background: #fff;
 position: fixed;
 top: 50%;
 left: 50%;
 opacity: 0;
 pointer-events: none;
 z-index: 999;
 max-height: 95%;
 overflow: auto;
 transform: translate(-50%, -50%);
 font-family: var(--base-fm);
}

.popupmodel h3 {
 margin-top: 0px;
}

.custom-popup .model-ovelay {
 pointer-events: auto;
 opacity: 1;
 visibility: visible;
}

.custom-popup .popupmodel {
 pointer-events: auto;
 opacity: 1;
}

.model-content {
 padding: 30px;
}

/**Inner Content part**/
.shiplistinfo {
 padding-left: 0;
 list-style: none;
 margin: 0;
 display: inline-block;
 width: 100%;
}

.shiplistinfo li {
 margin: 12px 0px;
 position: relative;
 padding-left: 15px;
}

.shiplistinfo li:before {
 content: '';
 position: absolute;
 left: 0px;
 top: 5px;
 width: 6px;
 height: 6px;
 background-color: #000;
 border-radius: 100%;
}

.btn-links-group {
 width: 100%;
 text-align: center;
 margin-top: 15px;
}

.c-shop-btn {
 width: 100%;
 background-color: var(--black-clr);
 border: 1px solid transparent;
 color: #fff;
 font-size: 16px;
 padding: 14px;
 margin-bottom: 25px;
 display: inline-block;
 outline: none;
 cursor: pointer;
}

.c-shop-btn:hover {
 border-color: var(--black-clr);
 background-color: transparent;
 color: var(--black-clr);
}

.c-shipping-link {
 color: var(--black-clr);
}

.c-shipping-link:hover {
 text-decoration: none;
}

/**Inner Content part**/

function popupModel() {
 document.body.classList.add('custom-popup');
}
function popupModelClose() {
 document.body.classList.remove('custom-popup');
}