I've got a two Modal windows, one is for adding data, the other for editing. The following 'Modal' does work, it closes when span (x) is pressed, or any other place is clicked.
<span class="close">×</span>
<form id="modal-form" method="POST" action="action.php">
<button id="form-submit" type="submit"></button>
</form> I've got a two Modal windows, one is for adding data, the other for editing. The following 'Modal' does work, it closes when span (x) is pressed, or any other place is clicked.
<span class="close">×</span>
<form id="modal-form" method="POST" action="action.php">
<button id="form-submit" type="submit"></button>
</form> However, this 'Modal2' does not react to close button. How is that possible? THey are in one html page, and javascript modal.js is included in <body> tag.
<span class="close">×</span>
<form id="modal-form" method="POST" action="action.php">
<input type="hidden" id= "idbs" name="idbs" />
<button id="form-submit" type="submit"></button>
</form>
and the Javascript for span is:
// Get the modal
var modal = document.getElementById('Modal');
// Get the button that opens the modal
var openBtn = document.getElementById("openModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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";
}
} -
span = document.getElementsByClassName("close")[0]selects the first found element only. – Teemu Commented Sep 18, 2017 at 4:21 - Ow wow. And should I copy this element and write ("close")[1]? – amelie Commented Sep 18, 2017 at 4:22
-
Maybe it's easier to delegate the event to the closest mon ancestor element. Similar you've done in
window.onclick, just check which span is clicked, and close the corresponding modal. – Teemu Commented Sep 18, 2017 at 4:24 -
Add
data-dismiss="modal"attribute into your span. It will also help to reduce your code. – Swanand Taware Commented Sep 18, 2017 at 4:30
2 Answers
Reset to default 2Try this:
// Get the modal
var modal = document.getElementById('Modal');
var modal2 = document.getElementById('Modal2');
// Get the button that opens the modal
var openBtn = document.getElementById("openModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks on the button, open the modal
/*openBtn.onclick = function() {
modal.style.display = "block";
}*/
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.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";
}else if(event.target == modal2){
modal2.style.display = "none";
}
}
<div id="Modal" class="modal">
<!-- Modal content add data -->
<div class="modal-content gradient-border">
<span class="close" id="span">×</span>
<form id="modal-form" method="POST" action="catadd.php">
<h4 id="modal-form-header">First add</h4>
<div class="gradient-border">
<h5>info</h5>
<br>
<button id="form-submit" class="main-btn" type="submit" value="add">add</button>
</div>
</form>
</div>
</div>
<div id="Modal2" class="modal">
<!-- Modal content edit data -->
<div class="modal-content gradient-border">
<span class="close" id="span2">×</span>
<form id="modal-form" method="POST" action="catedit.php">
<h4 id="modal-form-header">Second add</h4>
<div class="gradient-border">
<h5>info</h5>
<br>
<input type="hidden" id= "idbs" name="idbs" />
</div>
<br>
<button id="form-submit" class="main-btn" type="submit" value="edit">add</button>
</form>
</div>
</div>Hope the below solution works for you. Basically, I pass Modal ID in buttons as data attributes.
Note: I assume that the modal markup structure remains the same, otherwise the code element.parentNode.parentNode... will not work.
On click of the button, the modal dialog is displayed (using data attribute) and on click of span element in the modal, I get handle to parent div (having Modal ID) and close it.
//Display modal
function displayModal(element)
{
var modal = document.getElementById(element.dataset.modal);
modal.style.display = "block";
}
//Close modal
function closeDialog(element)
{
var modalID = element.parentNode.parentNode.getAttribute("id");
var modal = document.getElementById(modalID);
modal.style.display = "none";
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="Modal" class="modal">
<!-- Modal content add data -->
<div class="modal-content gradient-border">
<span class="close" onclick="closeDialog(this)">×</span>
<form id="modal-form" method="POST" action="cat.php">
<h4 id="modal-form-header">add</h4>
<div class="gradient-border">
<h5>info</h5>
<br>
<button id="form-submit" class="main-btn" type="submit" value="add">add</button>
</form>
</div>
</div>
</div>
<div id="Modal2" class="modal">
<!-- Modal content edit data -->
<div class="modal-content gradient-border">
<span class="close" onclick="closeDialog(this)">×</span>
<form id="modal-form" method="POST" action="cat.php">
<h4 id="modal-form-header">edit </h4>
<div class="gradient-border">
<h5>info</h5>
<br>
<input type="hidden" id="idbs" name="idbs" />
</div>
<br>
<button id="form-submit" class="main-btn" type="submit" value="edit">edit</button>
</form>
</div>
</div>
<button class="openModal" data-modal="Modal" onclick="displayModal(this)">Open modal 1</button>
<button class="openModal" data-modal="Modal2" onclick="displayModal(this)">Open modal 2</button>