We Keep Coding

i cant figure out how to get this span to close both modals

I am trying to make multiple modals that show different stuff when opened but, only the first modal will close and the second modal won't close when I press the span button. when console logged it only shows the first modals spans id it won't show the second spans id. is their ant DRY way of fixing this.
HTML
<!--Work-->
<div id="work">
<h2>Work</h2>
<ul>
<li>
<button class="nobs-modal-btn"><img src="./assets/images/favicon.oe.ico" alt="No Ordinary Burritos website" width="200px" height="200px"></button>
<p>No ordinary burritos</p>
</li>
<li>
<button class="run-buddy-modal-btn"><img src="./assets/images/hero-bg.jpg" alt="" width="200px" height="200px"></button>
<p>Run buddy</p>
</li>
</ul>
</div>
<!-- end Work -->
<!-- nobs Modal -->
<div id="nobs-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- run buddy Modal -->
<div id="run-buddy-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="./assets/images/hero-bg.jpg" alt="">
</div>
</div>
js
// Get the modal
var nobsModal = document.querySelector("#nobs-modal");
const runBuddyModal = document.querySelector("#run-buddy-modal")
// Get the button that opens the modal
var nobsBtn = document.querySelector(".nobs-modal-btn");
const runBuddyBtn = document.querySelector(".run-buddy-modal-btn");
// Get the <span> element that closes the modal
var span = document.querySelector("span");
// display modal
nobsBtn.addEventListener('click', () => {
nobsModal.style.display = "block"
})
runBuddyBtn.addEventListener('click', () => {
runBuddyModal.style.display = 'block'
})
span.addEventListener('click', () => {
nobsModal.style.display = "none"
runBuddyModal.style.display = 'none'
})
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == runBuddyModal) {
runBuddyModal.style.display = "none";
}
})
window.addEventListener("click", function(event) {
if (event.target == nobsModal) {
nobsModal.style.display = "none";
}
console.log(event)
})

Automatically open modal on page load

Ok a bit more explanation for the title, i have a modal that was from a template I bought that only really showed how to open it with a button, but I want the modal to show upon page load.
The problem is it doesn't open upon page load using this code:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks on the button, open the modal
$(window).on('load',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>

please try this onload page
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
use this html if...
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
hope above code will help you and below link will also helpful
Launch Bootstrap Modal on page load
thanks

My JavaScript pop up modal only works on the first item?

Hello I want a pop up modal to appear once a user clicks on a div, i've got a script that works but it will only work on the first div rather than all of them. I've linked the code below. Where do you think i'm going wrong?
<!-- Trigger/Open The Modal -->
<div class="job-wrap">
<button id="myBtn">
<div class="job-box">
<div class="text-box">
<p class="position-type">Part Time</p>
<p class="job-role">Graphic Designer</p>
<p class="company-name">Deans School Supply</p>
</div>
<div class="time-box">
<p>9 Days ago</p>
</div>
</div>
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="job-type">Full Time</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on 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>

First of all, id attribute should be unique on the page, don't multiply it! (and i'm assuming thats what you are doing, since you want multiple buttons to open modal). Secondly, you are matching only the first found id with the document.getElementById function. You should use the class attribute and the document.getElementsByClassName function instead.
<!-- Trigger/Open The Modal -->
<div class="job-wrap">
<button class="myBtn">
<div class="job-box">
<div class="text-box">
<p class="position-type">Part Time</p>
<p class="job-role">Graphic Designer</p>
<p class="company-name">Deans School Supply</p>
</div>
<div class="time-box">
<p>9 Days ago</p>
</div>
</div>
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="job-type">Full Time</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.etElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
for(var i = 0; i < btns.length; i++) {
btns[i].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>

JS Modal- Not using Bootstrap

How do I use an anchor tag instead of a button to trigger the modal? I can't use Bootstrap because I need to modify the size of the modal. I tried putting the ID in the href but that didn't help. Any suggestions?
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[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";
}
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>

If you simply change the existing <button> tag to <a> then your existing JS code should work. The principle is exactly the same, to get a reference to the element by ID and then attach a click handler.
But to get the anchor to display as a link it needs an href, so I've used href="#", and then updated the click function to cancel the default click behaviour.
You probably also want some CSS to hide the modal initially.
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function(e) {
e.preventDefault(); // ADDED this line
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";
}
}
#myModal { display: none; } /* added this CSS */
<!-- Trigger/Open The Modal -->
<a id="myBtn" href="#">Open Modal</a> <!-- changed tags, added href, kept id -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>

How to show different modal using Javascript with multiple button depending on the data

body html code:
note: that id is to differentiate the button click
foreach($threads as $t) { ?>
<button id="myBtn<?php echo $ids;?>" Open Modal</button>
<? } ?>
This is the modal code how can apply fetch data in here modal?:
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p></p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
This is the Javascript:
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[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 == modal1) {
modal.style.display = "none";
}
}
</script>
How can I manage modal in different value, if I'm fetching data from the database?