Comment modal

<!-- Comments with modal start -->
<div class="c-comments__container o-stack--sm">
    <div class="c-comments__header">
        <h5 class="c-comments__title">
            <svg class="o-icon" aria-hidden="true"> <use href="#comments"></use></svg> Comments
        </h5>
        <a class="c-btn c-btn--outline c-btn--xs">Add Comment</a>
    </div>
    <div class="c-comments__list">
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Toño</h6> <span class="c-comments__single-date">4 minutes ago</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">This is an example comment</p>
        </li>
        <!-- Single comment ends -->
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Billy</h6> <span class="c-comments__single-date">Sep 12 2019</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">These comments look way better</p>
        </li>
        <!-- Single comment ends -->
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Danira</h6> <span class="c-comments__single-date">Sep 10 2019</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">👇🏼🙄</p>
        </li>
        <!-- Single comment ends -->
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Nahum</h6> <span class="c-comments__single-date">Sep 9 2019</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don&#x27;t know exactly when we turned
                on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I&#x27;m breaking now. We said we&#x27;d say it was the snow that killed the other two, but it wasn&#x27;t. Nature is
                lethal but it doesn&#x27;t hold a candle to man.</p>
        </li>
        <!-- Single comment ends -->
    </div>
    <section class="c-modal">
        <div class="c-modal__container o-stack">
            <header class="c-modal__header">
                <h2 class="o-heading">Add new comment</h2> <button role="button" aria-label="Close modal" class="c-btn c-modal__btn-close">×</button>
            </header>
            <div class="c-modal__content">
                <textarea cols="10" rows="4" placeholder="Your comment"></textarea>
            </div>
            <div class="o-grid o-grid--auto--content">
                <button class="c-btn c-btn--primary c-btn--lg">Post comment</button>
            </div>
        </div>
    </section>
</div>
<!-- Comments with modal end -->

<!--
##################################################
Styles & scripts to make the modal example work
##################################################-->
<style>
    .c-comments__container>.c-modal {
        display: none;
    }

    .c-comments__container>.c-modal.is-open {
        display: flex;
    }
</style>

<script>
    var commentbtn = document.querySelectorAll('.c-comments__header .c-btn');
    var modal = document.querySelectorAll('.c-comments__container .c-modal');
    var modalClose = document.querySelectorAll('.c-modal__btn-close');
    commentbtn[0].onclick = function() {
        modal[0].classList.toggle("is-open");
        return false;
    }
    modalClose[0].onclick = function() {
        modal[0].classList.toggle("is-open");
        return false;
    }
</script>