I am attempting to develop a modal that will appear when the user clicks on a specific button. The goal is for this modal to showcase text retrieved from a separate file stored on the server. My aim is to show this text within a dialog box modal.
So far, I have tried linking the file directly, but unfortunately, the text from the file did not display inside the modal. Another approach I attempted was data-binding with a text observable, however, this method is relatively new to me.
<div class="logs">
<button type="button" id="btn2" data-toggle="modal"
data-target="#openLog" data-bind="click: GetLog">Whoosh</button>
</div>
<!--n-->
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="repModal" class="modal2">
<!-- Modal content -->
<div class="repmodal-content">
<div class="repmodal-header">
<h2 style="color:white;">Whoosh<style></style></h2>
</div>
<div class="remodal-headercontent"></div>
<div class="repmodal-body" id="logText">
<span data-bind="text: observable"></span>
<span class="repclose">Close</span>
</div>
</div>
</div>
<!--Javascript-->
<script>
// Get the modal
var modal = document.getElementById("repModal");
// Get the button that opens the modal
var btn = document.getElementById("btn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("repclose")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>