i have problem modals. want make many modals example 2 modals. first modal works correctly second isn't opening.
// modal var modal = document.getelementbyid('mymodal'); // button opens modal var btn = document.getelementbyid("mybtn"); // <span> element closes modal var span = document.getelementsbyclassname("close")[0]; // when user clicks button, open modal btn.onclick = function() { modal.style.display = "block"; } // when user clicks on <span> (x), close modal span.onclick = function() { modal.style.display = "none"; } // when user clicks anywhere outside of modal, close window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }/* modal (background) */ .modal { display: none; /* hidden default */ position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of 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 { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* add animation */ @-webkit-keyframes animatetop { {top:-300px; opacity:0} {top:0; opacity:1} } @keyframes animatetop { {top:-300px; opacity:0} {top:0; opacity:1} } /* 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; } .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/small-city-symbol.svg/348px-small-city-symbol.svg.png" id="mybtn" class="image fit" alt="" /> <div id="mymodal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>header</h2> </div> <div class="modal-body"> <br /> <br /> <div class="video-container"><iframe width="100" height="100" src="https://www.youtube.com/embed/lrbljyq_4ko?rel=0?ecver=1" frameborder="0" allowfullscreen></iframe></div> </div> </div> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/circle_-_black_simple.svg/2000px-circle_-_black_simple.svg.png" id="mybtn" class="image fit" alt="" /> <div id="mymodal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>header</h2> </div> <div class="modal-body"> <br /> <br /> <div class="video-container"><iframe width="100" height="100" src="https://www.youtube.com/embed/lrbljyq_4ko?rel=0?ecver=1" frameborder="0" allowfullscreen></iframe></div> </div> </div> </div>i want make many modals working correctly! look, second modal doesn't open. solutions? please easy solutions, don't want change code.
Comments
Post a Comment