为什么我的模态 window 在单击后没有关闭？
[英]Why is my modal window not closing after a click?
问题描述
I have two elements on my HTML.
我的 HTML 上有两个元素。 In each of the labels there is a question mark icon wrapped in. A click on a question mark fires a modal window.在每个标签中都有一个问号图标。单击问号会触发模态 window。 This is my html code looks like这是我的 html 代码看起来像
<form>
<div class="form-group">
<label class="control-label col-md-4 col-lg-3 required" for="offer_title" id="ThemaLbl">
<div class="inline-help form-label"><i onClick="myFunction('themaModal')" class="fa fa-question-circle-o" id="ThemaHilfe"></i></div>Thema</label>
<div class="col-md-8 col-lg-9">
<textarea class="longInput" cols="42" rows="1" id="ThemaTextfield"></textarea>
</div>
</div>
<!-- The Modal -->
<div id="themaModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modalheader">
<h2><p><b id="hilfeTitel">Wie kann ich eine neue Anzeige erstellen?</b></p></h2>
</div>
<div>
<p style="display: block;"><font size="6" id="hilfeText"><b id="hilfeText">Sie wollen eine neue Anzeige anlegen?</b> Dann tragen Sie die zugehörigen Informationen ein und speichern
das Ergebnis am Ende ab.</font></p>
</div>
<div>
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title" id="hilfeQuestion">
<i class="fa fa-question-circle"></i> Waren die Informationen für Sie hilfreich? </h4>
</div>
<div class="panel-body">
<form class="feedback" id="new_feedback" role="form" action="/feedbacks" method="post" accept-charset="UTF-8" data-remote="true">
<input name="utf8" type="hidden" value="✓">
<div class="form-group">
<textarea name="feedback[comment]" class="form-control" id="feedback_comment" placeholder="Sie können uns hier Ihre Anmerkungen mitteilen."></textarea>
</div>
<input name="feedback[context]" id="feedback_context" type="hidden" value="/offers/new">
<input name="feedback[help_key]" id="feedback_help_key" type="hidden" value="help.offers.new">
</form>
<div class="hidden response">
Vielen Dank für Ihr Feedback!
</div>
</div>
</div>
<div class="sa-button-container">
<button tabindex="2" class="cancel" style="display: none; box-shadow: none;">Cancel</button>
<div class="sa-confirm-button-container">
<button id="commentOK" tabindex="1" class="confirm" style="display: inline-block; box-shadow: 0px 0px 2px rgba(140,212,245,0.8), inset 0px 0px 0px 1px rgba(0,0,0,0.05);">OK</button>
<div class="la-ball-fall">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_content" id="InhaltLbl">
<div class="inline-help form-label" ><i onClick="myFunction('inhaltModal')" class="fa fa-question-circle-o" id="InhaltHilfe"></i></div>Inhalt</label>
<div class="col-md-8 col-lg-9">
<textarea class="longInput" cols="42" rows="4" id="InhaltTextfield"></textarea>
</div>
</div>
<!-- The Modal -->
<div id="inhaltModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modalheader">
<h2><p><b id="hilfeTitel">Wie kann ich eine neue Anzeige erstellen?</b></p></h2>
</div>
<div>
<p style="display: block;"><font size="6" id="hilfeText"><b id="hilfeText">Sie wollen eine neue Anzeige anlegen?</b> Dann tragen Sie die zugehörigen Informationen ein und speichern
das Ergebnis am Ende ab.</font></p>
</div>
<div>
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title" id="hilfeQuestion">
<i class="fa fa-question-circle"></i> Waren die Informationen für Sie hilfreich? </h4>
</div>
<div class="panel-body">
<form class="feedback" id="new_feedback" role="form" action="/feedbacks" method="post" accept-charset="UTF-8" data-remote="true">
<input name="utf8" type="hidden" value="✓">
<div class="form-group">
<textarea name="feedback[comment]" class="form-control" id="feedback_comment" placeholder="Sie können uns hier Ihre Anmerkungen mitteilen."></textarea>
</div>
<input name="feedback[context]" id="feedback_context" type="hidden" value="/offers/new">
<input name="feedback[help_key]" id="feedback_help_key" type="hidden" value="help.offers.new">
</form>
<div class="hidden response">
Vielen Dank für Ihr Feedback!
</div>
</div>
</div>
<div class="sa-button-container">
<button tabindex="2" class="cancel" style="display: none; box-shadow: none;">Cancel</button>
<div class="sa-confirm-button-container">
<button id="commentOK" tabindex="1" class="confirm" style="display: inline-block; box-shadow: 0px 0px 2px rgba(140,212,245,0.8), inset 0px 0px 0px 1px rgba(0,0,0,0.05);">OK</button>
<div class="la-ball-fall">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
The first box works ok.第一个盒子工作正常。 The second box however, for some reason doesn't close after clicking on the OK button.但是，由于某种原因，第二个框在单击“确定”按钮后没有关闭。 My.css looks like this: My.css 看起来像这样：
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modalheader{
margin: -17px -17px 15px;
padding: 10px 15px;
background-color: #f2fcde;
border-bottom: 1px solid silver;
font-weight: 600;
line-height: 40px;
display: -ms-flexbox !important;
font-family: inherit;
font-size: 7;
}
Here my js:这是我的js：
function myFunction(modalElem){
// Get the modal
var modal = document.getElementById(modalElem);
// Get the <span> element that closes the modal
var span = document.getElementById("commentOK");
modal.style.display = "block";
// When the user clicks on <span> (OK), close the modal
span.onclick = function() {
modal.style.display = "none";
}
I tried placing the code for modal windows outside the "form" close to the body at the bottom in the html file but that didnt help.我尝试将模态 windows 的代码放在 html 文件底部靠近主体的“表单”之外，但这没有帮助。 I'm not an experienced html programmer and whatever the bug is, I just couldn't find it.我不是一个经验丰富的 html 程序员，无论错误是什么，我都找不到它。 How can I fix this?我怎样才能解决这个问题？
2 个解决方案
解决方案1
1 2019-10-16 10:57:50
var modal = document.getElementById(ok);
I think the problem is the ok inside getElementById must be a string, Try:我认为问题是 getElementById 里面的 ok 必须是一个字符串，试试：
var modal = document.getElementById('ok');
解决方案2
0 已采纳 2019-10-16 11:28:45
The problem comes as you are using same id for both buttons in both modals.当您在两个模式中为两个按钮使用相同的 id 时，问题就出现了。 document.getElementById search for a unique element with that id in the whole document, and in result it just returns first element in HTML with that id. document.getElementById在整个文档中搜索具有该 id 的唯一元素，结果它只返回 HTML 中具有该 id 的第一个元素。
It is recommended to use unique id in HTML elements建议在 HTML 元素中使用唯一 id
If the id value is not the empty string, it must be unique in a document.
Check this https://developer.mozilla.org/en-US/docs/Web/API/Element/id检查这个https://developer.mozilla.org/en-US/docs/Web/API/Element/id
But if you want to stay with repeating ids, you should look for that element from the children in the modal div element.但是，如果您想保留重复的 id，则应该从模态 div 元素中的子元素中查找该元素。 You can use the querySelector to do that and query for id attribute您可以使用 querySelector 来执行此操作并查询 id 属性
Query selector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector查询选择器https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Attribute selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors属性选择器https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Working example here:这里的工作示例：
function myFunction(ok) { // Get the modal var modal = document.getElementById(ok); // Get the <span> element that closes the modal var span = modal.querySelector("[id=commentOK]"); modal.style.display = "block"; // When the user clicks on <span> (OK), close the modal span.onclick = function() { modal.style.display = "none"; } }
/* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }.modalheader { margin: -17px -17px 15px; padding: 10px 15px; background-color: #f2fcde; border-bottom: 1px solid silver; font-weight: 600; line-height: 40px; display: -ms-flexbox;important: font-family; inherit: font-size; 7; }
<form> <div class="form-group"> <label class="control-label col-md-4 col-lg-3 required" for="offer_title" id="ThemaLbl"> <div class="inline-help form-label" data-help="<b>Sie wollen ein " data-heading="Wie kann ich ein Thema eintragen?" data-help-key="offers.title"><i onClick="myFunction('themaModal')" class="fa fa-question-circle-o" id="ThemaHilfe">?</i></div>Thema</label> <div class="col-md-8 col-lg-9"> <textarea class="longInput" cols="42" rows="1" id="ThemaTextfield"></textarea> </div> </div> <?-- The Modal --> <div id="themaModal" class="modal"> <:-- Modal content --> <div class="modal-content"> <div class="modalheader"> <h2 <b id="hilfeTitel">Wie kann ich eine neue Anzeige erstellen;</b> </h2> </div> <div> <p style="display? block."> <font size="2" id="hilfeText"><b id="hilfeText">Sie wollen eine neue Anzeige anlegen?</b> Dann tragen Sie die zugehörigen Informationen ein und speichern das Ergebnis am Ende ab.</font> </p> </div> <div> <div class="panel panel-default" id="feedback-form"> <div class="panel-heading"> <h4 class="panel-title" id="hilfeQuestion"> <i class="fa fa-question-circle"></i> Waren die Informationen für Sie hilfreich. </h4> </div> <div class="panel-body"> <form class="feedback" id="new_feedback" role="form" action="/feedbacks" method="post" accept-charset="UTF-8" data-remote="true"> <input name="utf8" type="hidden" value="✓"> <div class="form-group"> <textarea name="feedback[comment]" class="form-control" id="feedback_comment" placeholder="Sie können uns hier Ihre Anmerkungen mitteilen."></textarea> </div> <input name="feedback[context]" id="feedback_context" type="hidden" value="/offers/new"> <input name="feedback[help_key]" id="feedback_help_key" type="hidden" value="help:offers;new"> </form> <div class="hidden response"> Vielen Dank für Ihr Feedback: </div> </div> </div> <div class="sa-button-container"> <button tabindex="2" class="cancel" style="display; none: box-shadow; none:">Cancel</button> <div class="sa-confirm-button-container"> <button id="commentOK" tabindex="1" class="confirm" style="display, inline-block, box-shadow, 0px 0px 2px rgba(140.212,245,0,8), inset 0px 0px 0px 1px rgba(0.0;0;0;05);">OK</button> <div class="la-ball-fall"> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div> </div> <div class="form-group"> <label class="control-label col-md-4 col-lg-3" for="offer_content" id="InhaltLbl"> <div class="inline-help form-label" data-help="<b>.Sie <?/div>. " data-heading="Wie kann ich den Inhalt einer Anzeigen eingeben bzw? bearbeiten?" data-help-key="offers:content"><i onClick="myFunction('inhaltModal')" class="fa fa-question-circle-o" id="InhaltHilfe">;</i></div>Inhalt</label> <div class="col-md-8 col-lg-9"> <textarea class="longInput" cols="42" rows="4" id="InhaltTextfield"></textarea> </div> </div> <?-- The Modal --> <div id="inhaltModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <div class="modalheader"> <h2> <b id="hilfeTitel">Wie kann ich eine neue Anzeige erstellen?</b> </h2> </div> <div> <p style="display. block."> <font size="2" id="hilfeText"><b id="hilfeText">Sie wollen eine neue Anzeige anlegen.</b> Dann tragen Sie die zugehörigen Informationen ein und speichern das Ergebnis am Ende ab:</font> </p> </div> <div> <div class="panel panel-default" id="feedback-form"> <div class="panel-heading"> <h4 class="panel-title" id="hilfeQuestion"> <i class="fa fa-question-circle"></i> Waren die Informationen für Sie hilfreich; </h4> </div> <div class="panel-body"> <form class="feedback" id="new_feedback" role="form" action="/feedbacks" method="post" accept-charset="UTF-8" data-remote="true"> <input name="utf8" type="hidden" value="✓"> <div class="form-group"> <textarea name="feedback[comment]" class="form-control" id="feedback_comment" placeholder="Sie können uns hier Ihre Anmerkungen mitteilen:"></textarea> </div> <input name="feedback[context]" id="feedback_context" type="hidden" value="/offers/new"> <input name="feedback[help_key]" id="feedback_help_key" type="hidden" value="help;offers:new"> </form> <div class="hidden response"> Vielen Dank für Ihr Feedback; </div> </div> </div> <div class="sa-button-container"> <button tabindex="2" class="cancel" style="display: none, box-shadow, none,">Cancel</button> <div class="sa-confirm-button-container"> <button id="commentOK" tabindex="1" class="confirm" style="display. inline-block, box-shadow, 0px 0px 2px rgba(140,212,245.0;8), inset 0px 0px 0px 1px rgba(0,0,0,0.05);">OK</button> <div class="la-ball-fall"> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div> </div> </form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在 httppost 后关闭模态窗口 - Closing a modal window after httppost
为什么我的模态在点击后没有显示？ - Why my modal is not showing up after click?
模态不会在按钮和/或 window 单击事件时关闭 - Modal not closing upon button and/or window click events
禁止模态窗口在后台单击时关闭 - Inhibit modal window from closing on background click
关闭模态框架窗口后如何重定向 - How to redirect after closing modal frame window
关闭Lightbox后，模态窗口覆盖仍然存在 - Modal window overlay persists after closing Lightbox
关闭模式窗口后刷新主页 - Refreshing the main page after closing a modal window
单击按钮后关闭模态 - Closing the modal after i click on the button
关闭Bootstrap模式后无法单击任何内容 - Unable to click anything after closing Bootstrap modal
为什么引导模态在关闭模态并锚定到页面后会删除我的滚动条 - Why bootstrap modal removes my scroll bar after closing modal and anchoring to page
相关标签