模態窗口錯誤

我是CSS的初學者，想知道如何將這種模式的背景始終佔據頁面的100％，即使頁面放大，背景仍然佔據100％的這一頁。模態窗口錯誤

$(document).ready(function(){ 
 
    $("a[rel=modal]").click(function(ev){ 
 
    ev.preventDefault(); 
 

 
    var id = $(this).attr("href"); 
 

 
    var alturaTela = $(document).height(); 
 
    var larguraTela = $(window).width(); 
 

 
    //colocando o fundo preto 
 
    $('#mascara').css({'width':larguraTela,'height':alturaTela}); 
 
    $('#mascara').fadeIn(1000); \t 
 
    $('#mascara').fadeTo("slow",0.8); 
 

 
    var left = ($(window).width() /2) - ($(id).width()/2); 
 
    var top = ($(window).height()/2) - ($(id).height()/2); 
 
    
 
    $(id).css({'top':top,'left':left}); 
 
    $(id).show(); \t 
 
    }); 
 

 
    $("#mascara").click(function(){ 
 
    $(this).hide(); 
 
    $(".window").hide(); 
 
    }); 
 

 
    $('.fechar').click(function(ev){ 
 
    ev.preventDefault(); 
 
    $("#mascara").hide(); 
 
    $(".window").hide(); 
 
    }); 
 
});

.window { 
 
    display: none; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background: #FFF; 
 
    z-index: 9900; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
} 
 
#mascara { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 9000; 
 
    background-color: #000; 
 
    display: none; 
 
} 
 
.fechar { 
 
    display: block; 
 
    text-align: right; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
 
<a href="#modalAdocao" rel \t ="modal">Janela 2 modal</a> 
 
<div class="window" id="modalAdocao"> 
 
    <button class="fechar">Fechar</button> 
 
    <h4>Formulario</h4> 
 
    <form action="#" method="post"> 
 
<label for="nome">Nome:</label> 
 
<input type="text" name="nome" id="nome"> 
 
<br /> 
 
<label for="nome">Senha:</label> 
 
<input type="text" name="senha" id="senha"> 
 
<br /> 
 
<input type="submit" value="enviar"> 
 
    </form> 
 
</div> 
 

 
<!-- mascara para cobrir o site --> 
 
<div id="mascara"></div>

來源

2016-12-09 Isaac Meneses

多數民衆贊成在背景層，覆蓋屏幕的整個寬度和高度，你想要什麼？想要刪除該圖層？ –

這就是背景圖層必須覆蓋屏幕的全部寬度和高度 –

根據您的代碼，它覆蓋了整個寬度和高度，最新的問題是什麼？ –

這將有助於。

<html> 
<head> 
    <title>Janela modal</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("a[rel=modal]").click(function(ev){ 
       ev.preventDefault(); 

       var id = $(this).attr("href"); 
       $('#mascara').fadeIn(1000); 
       $('#mascara').fadeTo("slow",0.8); 
       $(id).show(); 
      }); 

      $("#mascara").click(function(){ 
       $(this).hide(); 
       $(".window").hide(); 
      }); 

      $('.fechar').click(function(ev){ 
       ev.preventDefault(); 
       $("#mascara").hide(); 
       $(".window").hide(); 
      }); 
     }); 
    </script> 

    <style type="text/css"> 

    .window{ 
     display:none; 
     width:300px; 
     height:300px; 
     position:absolute; 
     left:0; 
     top:50%; 
     right: 0; 
     -webkit-transform: translateY(-50%); 
     -ms-transform: translateY(-50%); 
     -o-transform: translateY(-50%); 
     transform: translateY(-50%); 
     margin: auto; 
     background:#FFF; 
     z-index:9900; 
     padding:10px; 
     border-radius:10px; 
    } 

    #mascara{ 
     position:absolute; 
     left:0; 
     top:0; 
     right: 0; 
     bottom: 0; 
     z-index:9000; 
     background-color:#000; 
     display:none; 
    } 

    .fechar{display:block; text-align:right;} 

    </style> 

</head> 


<body> 

    <a href="#modalAdocao" rel ="modal">Janela 2 modal</a> 




    <div class="window" id="modalAdocao"> 
     <button class="fechar">Fechar</button> 
     <h4>Formulario</h4> 
     <form action="#" method="post"> 
      <label for="nome">Nome:</label> 
      <input type="text" name="nome" id="nome"> 
      <br /> 

      <label for="nome">Senha:</label> 
      <input type="text" name="senha" id="senha"> 
      <br /> 

      <input type="submit" value="enviar"> 

     </form> 
    </div> 

    <!-- mascara para cobrir o site --> 
    <div id="mascara"></div> 
</body>

來源

2016-12-09 06:00:07

謝謝！ –

高度和寬度屬性可以用％而不是px來表示嗎？ –

我們可以給出模型框的寬度和高度百分比，高度將根據模型框的內容進行調整。 –

模態窗口錯誤

回答

相關問題