Таблица и модальное окно

HTML

<label for="modal-1"><p style="width: 200px; cursor: pointer; padding:10px 20px; color:#fff; background-color:#e62929;">Модальное окно</p></label>
<div class="modal">
<p style="width: 200px; cursor: pointer; padding:10px 20px; color:#fff; background-color:#e62929;" onclick='btn()'>Onclick</p>
<div class="modal">
<input class="modal-open" id="modal-1" type="checkbox" hidden>
<div class="modal-wrap" aria-hidden="true" role="dialog">
<label class="modal-overlay" for="modal-1"></label>
<div class="modal-dialog">
<div class="modal-body">
<p>У лукоморья дуб зелёный;<br>
Златая цепь на дубе том:<br>
И днём и ночью кот учёный<br>
Всё ходит по цепи кругом;<br>
Идёт направо - песнь заводит,<br>
Налево - сказку говорит.<br>
Там чудеса: там леший бродит,<br>
Русалка на ветвях сидит;<br>
Там на неведомых дорожках<br>
Следы невиданных зверей;<br>
Избушка там на курьих ножках<br>
Стоит без окон, без дверей;<br>
Там лес и дол видений полны;<br>
Там о заре прихлынут волны<br>
На брег песчаный и пустой,<br>
И тридцать витязей прекрасных<br>
Чредой из вод выходят ясных,<br>
И с ними дядька их морской;<br>
Там королевич мимоходом<br>
Пленяет грозного царя;<br>
Там в облаках перед народом<br>
Через леса, через моря<br>
Колдун несёт богатыря;<br>
В темнице там царевна тужит,<br>
А бурый волк ей верно служит;<br>
Там ступа с Бабою Ягой<br>
Идёт, бредёт сама собой,<br>
Там царь Кащей над златом чахнет;<br>
Там русский дух... там Русью пахнет!<br>
И там я был, и мёд я пил;<br>
У моря видел дуб зелёный;<br>
Под ним сидел, и кот учёный<br>
Свои мне сказки говорил.<br></p>
</div>
</div>
</div>
</div>

CSS

.modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
}
.modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
}
/* активация слоя затемнения и модального блока */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
    display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* элементы модального окна */
.modal-dialog {
    background: #fefefe;
    border: none;
    border-radius: 5px;
    position: fixed;
    width: 80%;
    left: 50%;
    top: -100%;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    z-index: 103;
}
.modal-body {
padding: 20px;
height: auto;
}

JavaScript

function btn() {document.querySelector('.modal-open').checked = true;  
}