How do I include a modal in a website built using Quarto?

[moshialam]

Description

I am using Quarto to build an academic website. I want to have my abstracts as buttons and abstract contents in a modal. While I am able to easily incorporate buttons, using standard html, the modal content is not at all wrapping, and I do not see a close icon to close the model. Even pressing escape doesn't help once the modal is opened.

In my index.qmd:

<button class="abstract-btn">Abstract</button>
<div id="abstractModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Here is the abstract of my research paper. it is a long abstract. I want to see if it wraps or not.>
  </div>
</div>

JavaScript at the end:

<script>
document.querySelectorAll('.abstract-btn').forEach(function(btn) {
  btn.onclick = function() {
    var modal = document.getElementById('abstractModal');
    modal.style.display = "block";
  }
});

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  var modal = document.getElementById('abstractModal');
  modal.style.display = "none";
}

window.onclick = function(event) {
  var modal = document.getElementById('abstractModal');
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Content in styles.css to handle the modal

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
    font-family: Palatino, "Palatino Linotype", serif;
    word-wrap: break-word;
}

.close {
    cursor: pointer;
    color: #121111;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

This generates a button which when clicked brings up the following:

I would really appreciate any help regarding this! Thanks!

[moshialam]

I found a pretty good solution here