admin管理员组文章数量:1435524
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>本文标签： javascriptSpan class does not close in Modal windowStack Overflow
版权声明：本文标题：javascript - Span class does not close in Modal window - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745645022a2668083.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论