[英]How to open 2 different modals with 2 different buttons
I have the following code and i am trying to open 2 different modals in each separate link. 我有以下代码,我试图在每个单独的链接中打开2个不同的模态。
modal link 1 -> open modal1 modal link 2 -> open modal2 模式链接1->打开模式1模式链接2->打开模式2
<p data-height="265" data-theme-id="0" data-slug-hash="gWKOmP" data-default-tab="css,result" data-user="pansotdev" data-embed-version="2" data-pen-title="2 modals" class="codepen">See the Pen <a href="https://codepen.io/pansotdev/pen/gWKOmP/">2 modals</a> by Sotiris Panagopoulos (<a href="http://codepen.io/pansotdev">@pansotdev</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
https://codepen.io/anon/pen/OGdXXr https://codepen.io/anon/pen/OGdXXr
I correct your code I will let you play with the last function cos you have to determine exactly where we must click (which element) to close your modals. 我更正了您的代码,我将让您使用最后一个函数cos,您必须确切确定我们必须单击(哪个元素)以关闭模态的位置。
also, one ID must be unique you can have the same id on a different element. 同样,一个ID必须唯一,您可以在不同的元素上使用相同的ID。
as you look beginner I think, it is the easier way I could make for you. 我认为您是初学者,这是我可以为您制作的更简单的方法。
if you need more explanation let me know. 如果您需要更多解释,请告诉我。
if the link doesn't work, 如果链接无效,
your HTML corrected: 您的HTML已更正:
<!-- The 1st button -->
<a id="myBtn1" href="#" class="copy_code" rel="nofollow">open modal 1</a>
<!-- The 2nd button -->
<a id="myBtn2" href="#" rel="nofollow">open modal 2</a>
<!-- The 1st Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h1 class="page-title">modal1</h1>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!-- The 2nd Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h1 class="page-title">modal2</h1>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
then your JavaScript corrected: 然后您的JavaScript更正了:
// Get the modal
var modal1 = document.getElementById('myModal1');
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
// set modal as hidden
modal1.hidden = true;
modal2.hidden = true;
// When the user clicks the button, open the modal
btn1.onclick = () => {
return modal1.hidden = false;
}
btn2.onclick = () => {
return modal2.hidden = false;
}
// When the user clicks on <span> (x), close the modal
span1.onclick = () => {
return modal1.hidden = true;
}
span2.onclick = () => {
return modal2.hidden = true;
}
// When the user clicks anywhere outside of the modal, close it //that's the logic
window.onclick = (event) =>{
if(modal1 || modal2 != false){
return modal1 && modal2 == true
}
}
see ya 再见
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.