Question

我是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);	
  $('#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();	
  });

  $("#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	="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>

Answer 1

这会有所帮助。

<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>

模态窗口错误

1 个答案: