Wie verwalte ich mehrere Overlays auf verschiedenen Schaltflächen Klicks?

Question

function toggleOverlay_1() { 
 
    var overlay = document.getElementById('overlay'); 
 
    var specialBox = document.getElementById('specialBox_1'); 
 
    overlay.style.opacity = .8; 
 
    if (overlay.style.display == "block") { 
 
    overlay.style.display = "none"; 
 
    specialBox.style.display = "none"; 
 
    } else { 
 
    overlay.style.display = "block"; 
 
    specialBox.style.display = "block"; 
 
    } 
 
} 
 

 
function toggleOverlay_2() { 
 
    var overlay = document.getElementById('overlay'); 
 
    var specialBox = document.getElementById('specialBox_2'); 
 
    overlay.style.opacity = .8; 
 
    if (overlay.style.display == "block") { 
 
    overlay.style.display = "none"; 
 
    specialBox.style.display = "none"; 
 
    } else { 
 
    overlay.style.display = "block"; 
 
    specialBox.style.display = "block"; 
 
    } 
 
}

div#overlay { 
 
    display: none; 
 
    z-index: 2; 
 
    background: #000; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    text-align: center; 
 
} 
 
div#specialBox_1 { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 3000; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #FFF; 
 
    color: #000; 
 
} 
 
div#specialBox_2 { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 3000; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #FFF; 
 
    color: #000; 
 
} 
 
div#wrapper { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding-left: 24px; 
 
} 
 
.closebtn { 
 
    position: absolute; 
 
    top: 0%; 
 
    right: 45px; 
 
    font-size: 40px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 
 
<div id="overlay"> 
 
    <div id="specialBox"> 
 
    <iframe id="myVid_1" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe> 
 
    <div class="closebtn"> 
 
     <a href="javascript:void(0)" onclick="toggleOverlay_1();">&times;</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="overlay"> 
 
    <div id="specialBox"> 
 
    <iframe id="myVid_2" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe> 
 
    <div class="closebtn"> 
 
     <a href="javascript:void(0)" onclick="toggleOverlay_2();">&times;</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="wrapper"> 
 
    <input type="button" name="Google_Red" class="button_red" value="Google" a href="#" onclick="toggleOverlay_1()"></input> 
 
    <br> 
 

 
    <input type="button" name="W3Schools Red" class="button_red" value="Sealed Air" a href="#" onclick="toggleOverlay_2()"></input> 
 
    <br> 
 
</div>

Ich versuche, verschiedene Videos zu öffnen (in einem Overlay) auf verschiedenen Tastenklicks. Ich könnte das gut, wenn ich nur einen Knopf benutze und es das Video richtig öffnet. Aber wenn ich versuche, verschiedene Videos an verschiedene Buttons zu binden, bindet es nur ein Video an alle Buttons. Kann mir jemand sagen, wie ich dieses Problem lösen kann?

Answer 1

Basierend auf Ihren HTML und jquery. Hier ist was du tun musst. Anstatt 2 Funktionen zu machen. Behalten Sie eine Funktion zum Umschalten mit der iframe-ID als Parameter toggleOverlay(playerid) bei. Da das übergeordnete div Ihrer Video-iframe-ID die specialbox ist und das übergeordnete specialbox-Element das Overlay selbst ist. Sie können die .parent() - Methode von jquery verwenden, um sie einzurichten.

function toggleOverlay(playerid){ 
    $("#" + playerid).parent("#specialBox").parent().css("opacity",".8"); 
    $("#" + playerid).parent("#specialBox").parent().toggle(); 
    $("#" + playerid).parent("#specialBox").toggle(); 
} 

nun in die Tasten oder überall Sie die toggleOverlay Funktion aufrufen, die einzigartige playerid als Parameter und Ihre Set basierend auf welche Schaltfläche Griffe, die Overlay.

Auch können Sie nicht 2 Divs mit gleichen IDs haben. Ändern Sie also die zweite Überlagerungs-ID in "Overlay2".

Hier arbeitet Beispiel:

http://codepen.io/Nasir_T/pen/pEmEJE

Answer 2

Da Sie das div mit einer ID ausrichten, nimmt das DOM das erste div mit dieser ID (Ihr erstes Video). Sie müssen also Ihr zweites Overlay mit einer anderen ID versehen.

Answer 3

Hier ist eine Neuaufbau-Option, ich denke, das könnte einfacher sein, als all das Javascript für jedes Video zu machen.

// This part isnt needed but I added it in case you wanted it 
 

 
// Get the modals 
 
var modal = document.getElementById('id01'); 
 
var modal2 = document.getElementById('id02'); 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
    if (event.target == modal2) { 
 
    modal2.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    z-index: 3; 
 
    display: none; 
 
    padding-top: 100px; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgb(0, 0, 0); 
 
    background-color: rgba(0, 0, 0, 0.4) 
 
} 
 
.modal-content { 
 
    margin: auto; 
 
    background-color: #fff; 
 
    position: relative; 
 
    padding: 0; 
 
    outline: 0; 
 
    width: 600px 
 
} 
 
.container { 
 
    padding: 0.01em 16px 
 
} 
 
.closebtn { 
 
    text-decoration: none; 
 
    float: right; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 
.closebtn:hover, 
 
.closebtn:focus { 
 
    color: red; 
 
    cursor: pointer 
 
}

<button onclick="document.getElementById('id01').style.display='block'">Open Video 1</button> 
 
<button onclick="document.getElementById('id02').style.display='block'">Open Video 2</button> 
 

 
<!-- Video 1 --> 
 
<div id="id01" class="modal"> 
 
    <div class="modal-content"> 
 
    <div class="container"> 
 
     <span onclick="document.getElementById('id01').style.display='none'" class="closebtn">&times;</span> 
 
     <iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Video 2 --> 
 
<div id="id02" class="modal"> 
 
    <div class="modal-content"> 
 
    <div class="container"> 
 
     <span onclick="document.getElementById('id02').style.display='none'" class="closebtn">&times;</span> 
 
     <iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe> 
 
    </div> 
 
    </div> 
 
</div>