.modalbackground {
margin: 0; /* убираем отступы */
padding: 0; /* убираем отступы */
position: fixed; /* фиксируем положение */
top:0; /* растягиваем блок по всему экрану */
bottom:0;
left:0;
right:0;
background: rgba(0,0,0,0.5); /* полупрозрачный цвет фона */
z-index:100; /* выводим фон поверх всех слоев на странице браузера */
opacity:0; /* Делаем невидимым */
pointer-events: none; /* элемент невидим для событий мыши */
}

/* при отображении модального окно - именно здесь начинается магия */
.modalbackground:target {
	z-index: 99;
    opacity: 1; /* делаем окно видимым */ 
    pointer-events: auto; /* элемент видим для событий мыши */
}

/* ширина диалогового окна и его отступы от экрана */
.modalwindow {
    width: 100%;
    max-width: 300px;
    margin: 20% auto;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
}

/* настройка заголовка */
.modalwindow h3 {
padding: 0;
margin: 0;
}

/* оформление сообщение */
.modalwindow p {
padding: 0;
margin: 4% 0 8% 0;
}

/* вид кнопки ЗАКРЫТЬ */
.modalwindow a {
display: block;
color: #fff;
background: red;
padding: 2%;
margin: 0 auto;
width: 50%;
text-align: center;
text-decoration: none;
}

/* вид кнопки ЗАКРЫТЬ при наведении на нее мыши */
.modalwindow a:hover {
background: #93b0be;
}

.modalwindow2 {
    width: 100%;
    max-width: 300px;
    margin: 20% auto;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
}

/* настройка заголовка */
.modalwindow2 h3 {
padding: 0;
margin: 0;
}

/* оформление сообщение */
.modalwindow2 p {
padding: 0;
margin: 4% 0 8% 0;
}

/* вид кнопки ЗАКРЫТЬ */
.modalwindow2 a {
display: block;
color: #fff;
background: green;
padding: 2%;
margin: 0 auto;
width: 50%;
text-align: center;
text-decoration: none;
}