html { font-size: 62.5%; }
body { --light: hsl(0, 0%, 100%); --background: linear-gradient(to right bottom, hsl(236, 50%, 50%), hsl(195, 50%, 50%));
display: flex; flex-direction: column; justify-content: center; align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
min-height: 100vh; background: linear-gradient(to bottom, hsl(236, 50%, 98%), hsl(236, 50%, 94%)); }
a, a:link { font-family: inherit; text-decoration: none; }
/* modal */ /* =============================================== */ .modal-container {
position: fixed; top: 0; left: 0; z-index: 10;
display: flex; justify-content: center; align-items: center;
width: 100%; height: 100%;
background: hsla(0, 0%, 40%, .6); }
/* using :target */ .modal-container:target { display: flex; }
.modal { width: 60rem; padding: 4rem 2rem; border-radius: .8rem;
color: var(--light); background: var(--background); box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3); position: relative;
overflow: hidden; }
.modal__details { text-align: center;
margin-bottom: 4rem; padding-bottom: 4rem; border-bottom: 1px solid hsla(0, 0%, 100%, .4); }
.modal__title { font-size: 3.2rem; }
.modal__description { margin-top: 2rem;
font-size: 1.6rem; font-style: italic; }
.modal__text { padding: 0 4rem; margin-bottom: 4rem;
font-size: 1.6rem; line-height: 2; }
.modal__text::before { content: '';
position: absolute; top: 0%; left: 100%; transform: translate(-50%, -50%);
width: 18rem; height: 18rem; border: 1px solid hsla(0, 0%, 100%, .2); border-radius: 100rem;
pointer-events: none; }
.modal__btn { padding: 1rem 1.6rem; border: 1px solid hsla(0, 0%, 100%, .4); border-radius: 100rem;
color: inherit; background: transparent; font-size: 1.4rem; font-family: inherit; letter-spacing: .2rem;
transition: .2s; cursor: pointer; }
.modal__btn:hover, .modal__btn:focus { border-color: hsla(0, 0%, 100%, .6); transform: translateY(-.2rem); }
/* links */ /* =============================================== */ .link-1 { font-size: 1.8rem;
color: var(--light); background: var(--background); box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3); border-radius: 100rem; padding: 1.4rem 3.2rem;
transition: .2s; }
.link-1:hover, .link-1:focus { transform: translateY(-.2rem); box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4); }
.link-2 { width: 4rem; height: 4rem; border: 1px solid hsla(0, 0%, 100%, .4); border-radius: 100rem;
color: inherit; font-size: 2.2rem;
position: absolute; top: 2rem; right: 2rem;
display: flex; justify-content: center; align-items: center;
transition: .2s; }
.link-2::before { content: '×';
transform: translateY(-.1rem); }
.link-2:hover, .link-2:focus { border-color: hsla(0, 0%, 100%, .6); transform: translateY(-.2rem); }
/* Second Version Link */ /* =============================================== */ .second-version-link, .second-version-link:link { color: hsl(236, 50%, 50%); padding: .8rem 1.6rem .8rem .2rem; border-bottom: 2px solid hsl(236, 50%, 50%);
font-size: 1.4rem; font-weight: bold;
position: absolute; top: 4rem; right: 4rem; }
.second-version-link::after { content: '\2197';
position: absolute; top: 0; right: 0;
font-size: .9em; }
.abs-site-link { position: fixed; bottom: 20px; left: 20px; color: hsla(0, 0%, 0%, .6); font-size: 1.6rem; }
open();
function closs(){
$("#modal-opened").hide();
} function open() { $("#modal-opened").show();
}
You can see how this popup was set up in our step-by-step guide: https://wppopupmaker.com/guides/auto-opening-announcement-popups/