javascript - 如何使模态框出现在整个页面上

Question

如何使模态显示在所有页面上？

 .modal {


   display: none; /* Hidden by default */
             position:relative;; /* Stay in place */
             z-index: 1; /* Sit on top */
             padding-top: 50px; /* Location of the 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: none solid #888;
             width:20%;
             height: auto;
             box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgbs(0,0,0,0.19);
             -webkit-animation-name: animatetop;
             -webkit-animation-duration: 1s;
             animation-name: animatetop;
             animation-duration: 1s
         }

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

         @keyframes animatetop {
             from {top:-300px; opacity:0}
             to {top:0; opacity:1}
         }

         /* 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 {
             background-color: #5cb85c;
             color: white;
         }

         .modal-body
          {
          width: 300px;
              }

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


         // Get the modal
         var modal = document.getElementById('myModal');
         //Adiciona um eventListener a todos os elementos com a classe video, quando clicaldo chama a função é passada ao handler para ser executada
         //A funcção troca o estilo do display da modal box.
          const btns = document.querySelectorAll('.video');
          for( const btn of btns ) {
           btn.addEventListener('click', handler, false);
          }
          function handler(element)
          {
           modal.style.display = "block";
           //var source = $(element).find('video').attr('src');
           //window.alert(source);

          }

         //Seleciona todos os elementos com a classe video e quando o seu click for disparado cria uma função anonima que irá executar  todas as operaçãoes cada vez que um desses elementos for clicado.
          var vids = $('.video');
          vids.on('click', function() {
            var source = $(this).find('video').attr('src');;
            $('#video1').attr('src',source); // or whatever.
            //console.log(thing.prop('src'));
         })
         //Preferivel
         //var source = $('.video').on('click', function(event) { $(this/* which is also the original element in question  */).find('video').prop('src')});
         //$('#video1').attr('src',source);
         //$(element).on('click', function(event) { $(this/* which is also the original element in question  */).find('video').prop('src'); // so this should get the src property of any <video> element which is a child of the element which triggered the event
         //
         var span = document.getElementsByClassName("close")[0];

         // When the user clicks on <span> (x), close the modal
         span.onclick = function() {
             modal.style.display = "none";
         }

             window.onclick = myFunction;

             function myFunction(e) {## 
                  ----------
                  enter code here
                   ##
               if (e.path.length<4  || !e.path.indexOf(modal)) {
                            enter code heremodal.style.display = "none";
               }

                }

Answer 1

我会在 .modal 元素的 css 中使用 position: fixed;，以便在滚动时模态保持在原位。

此外，您的 html 的 body 标签(或将包含模式的元素)必须设置高度和宽度，最好是 100%。如果 body 没有高度，您将无法使用百分比值设置高度。