Создание модального окна для отображения видео

Question

Застрял в создании модального окна и заставил его щелкнуть по щелчку. Модальные элементы даже не отображаются в моем браузере, но они работают в JSFid. Это браузер или это код? Также любопытно, что именно я делаю неправильно, пытаясь довольно много.
HTML-:

<section id="modals"> 
<button id="myBtn">Open Modal</button> 
<div id="myModal" class="modal"> 
    <div> 
     <div class="modal-content"> 
      <span class="close">&times;</span> 
      <div class="modal clearfix"> 
       <div class="modal-menu"> 
        <div class="modal-menu-item">Video</div> 
        <div class="modal-menu-item">Video</div> 
        <div class="modal-menu-item">Video</div> 
        <div class="modal-menu-item">Video</div> 
        <div class="modal-menu-item">Video</div> 
        <div class="modal-menu-item">Video</div> 
        <div class="modal-menu-item">Video</div> 
       </div> 

       <div class="modal-content"> 
        <div class="modal-header">Header</div> 
        <div class="modal-body">Body</div> 
        <div class="modal-footer">Footer</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS-:

.modal{ 
     box-sizing: border-box; 
     width: 500px; 
     height: 300px; 
     background: gray; 

    } 
    .modal:before{ 
     box-sizing:inherit; 
    } 
    .modal-menu, 
    .modal-content { 
     height: 100%; 
     float: left; 
    } 
    .clearfix:after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 
    .modal-menu { 
     width: 20%; 
     background: #257562; 
     overflow: auto; 
    } 


    .modal-content { 
     width: 80%; 
     padding: 50px 0; 
     position: relative; 
     background: blue; 
    } 

    .modal-header, 
    .modal-footer { 
     width: 100%; 
     height: 50px; 
     position: absolute; 
     left: 0; 
    } 

    .modal-header { 
     top: 0; 
     background: #E85C74; 
    } 

    .modal-body { 
     height: 100%; 
     background: #F9D24F; 
    } 

    .modal-footer { 
     bottom: 0; 
     background: #752570; 
    } 

    .modal-menu-item { 
     width: 100%; 
     height: 50px; 
     margin-bottom: 15px; 
     background: #F48829; 
    } 

    .modal-menu-item:last-of-type { 
     margin-bottom: 0; 
    } 

JS:

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

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on 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"; 
    } 
} 

Answer 1

Если вы используете Bootstrap режимные вы должны включить JQuery Библиотеку вашей странице и попробуйте следующую треску e for hide/show modal ::

$('#myModal).modal('show'); // For displaying the modal 
$('#myModal').modal('hide'); // For hiding the modal