複数のモジュラーのオーバーレイは可能ですか？

いくつかのオーバーレイでmyBtnクラスを使用できないのはなぜですか？それは働かなくてはならないクラスですか？いくつかのボタンにオーバーレイ機能を使用したいのですが、何らかの方法で可能ですか？私はIDが何回か使用されていないことを知っています。なぜなら、私はそれをクラスに変更するのですが、それでも動作しません。複数のモジュラーのオーバーレイは可能ですか？

私は以下のw3schoolsの例があります。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* The Modal (background) */ 
.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
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 */ 
-webkit-animation-name: fadeIn; /* Fade in the background */ 
-webkit-animation-duration: 0.4s; 
animation-name: fadeIn; 
animation-duration: 0.4s 
} 

/* Modal Content */ 
.modal-content { 
position: fixed; 
bottom: 0; 
background-color: #fefefe; 
width: 100%; 
-webkit-animation-name: slideIn; 
-webkit-animation-duration: 0.4s; 
animation-name: slideIn; 
animation-duration: 0.4s 
} 

/* The Close Button */ 
.close { 
color: white; 
float: right; 
font-size: 28px; 
font-weight: bold; 
} 

.close:hover, 
.close:focus { 
color: #000; 
text-decoration: none; 
cursor: pointer; 
} 

.modal-header { 
padding: 2px 16px; 
background-color: #5cb85c; 
color: white; 
} 

.modal-body {padding: 2px 16px;} 

.modal-footer { 
padding: 2px 16px; 
background-color: #5cb85c; 
color: white; 
} 

/* Add Animation */ 
@-webkit-keyframes slideIn { 
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1} 
} 

@keyframes slideIn { 
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1} 
} 

@-webkit-keyframes fadeIn { 
from {opacity: 0} 
to {opacity: 1} 
} 

@keyframes fadeIn { 
from {opacity: 0} 
to {opacity: 1} 
} 
</style> 
</head> 
<body> 

<h2>Bottom Modal</h2> 

<!-- Trigger/Open The Modal --> 
<button class="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<div class="modal-header"> 
    <span class="close">&times;</span> 
    <h2>Modal Header</h2> 
</div> 
<div class="modal-body"> 
    <p>Some text in the Modal Body</p> 
    <p>Some other text...</p> 
</div> 
    <div class="modal-footer"> 
    <h3>Modal Footer</h3> 
</div> 
</div> 

</div> 

<h2>2 Bottom Modal</h2> 

<!-- Trigger/Open The Modal --> 
<button class="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<div class="modal-header"> 
    <span class="close">&times;</span> 
    <h2>Modal Header</h2> 
</div> 
<div class="modal-body"> 
    <p>Some text in the Modal Body</p> 
    <p>Some other text...</p> 
</div> 
<div class="modal-footer"> 
    <h3>Modal Footer</h3> 
</div> 
</div> 

</div> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementsByClassName("myBtn")[0]; 

// 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"; 
} 
} 
</script> 

</body> 
</html>

出典

2017-08-29 Anonymous

Uは、次のIDの2倍を使用しています。

id="myModal"

クラスに変更し、それを、それは次のようになりますので、また、JavaScriptの一部：uが言ったように

var modal = document.getElementByClassName('myModal');

は、uは一度だけのIDを使用することができます。

出典

2017-08-29 12:08:02 Flowen

いいえ動作しません。 –

しかし、少なくとも1つの@ A10で動作していますか？または、オーバーレイ作業を行うための助けが必要です。 – Flowen

最初のものは動作しませんが、別のもの用に使用すると動作しません。私もクラスにすべてのIDを変更しましたが、2番目または1つまたはいくつかの異なるものは動作しません。 –

複数のモジュラーのオーバーレイは可能ですか？

答えて

関連する問題