Html 模态窗口误差_Html_Css_Css Float

Html 模态窗口误差

html css

Html 模态窗口误差,html,css,css-float,Html,Css,Css Float,我是CSS的初学者，我想知道如何将此模式的背景始终占据页面的100%，即使页面被放大，背景仍将占据页面的100% $（文档）.ready（函数（）{ $（“a[rel=modal]”。单击（函数（ev）{ ev.preventDefault（）； var id=$（this.attr（“href”）； var alturaTela=$（document.height（）； var larguraTela=$（window.width（）； //科罗坎多·芬多·普雷托 $（“#睫毛膏”）.css

我是

CSS

的初学者，我想知道如何将此模式的背景始终占据页面的100%，即使页面被放大，背景仍将占据页面的100%

$（文档）.ready（函数（）{
$（“a[rel=modal]”。单击（函数（ev）{
ev.preventDefault（）；
var id=$（this.attr（“href”）；
var alturaTela=$（document.height（）；
var larguraTela=$（window.width（）；
//科罗坎多·芬多·普雷托
$（“#睫毛膏”）.css（{'width'：larguraTela，'height'：alturaTela}）；
$（'睫毛膏'）.fadeIn（1000）；
$（'睫毛膏'）.fadeTo（“慢”，0.8）；
var left=（$（window.width（）/2）-（$（id.width（）/2）；
var top=（$（window.height（）/2）-（$（id.height（）/2）；
css（{'top'：top，'left'：left}）；
$（id.show（）；
});
$（“#睫毛膏”）。单击（函数（）{
$（this.hide（）；
$（“.window”）.hide（）；
});
$（'.fechar'）。单击（函数（ev）{
ev.preventDefault（）；
$（“#睫毛膏”）.hide（）；
$（“.window”）.hide（）；
});
});
.window{
显示：无；
宽度：300px；
高度：300px；
位置：绝对位置；
左：0；
排名：0；
背景：#FFF；
z指数：9900；
填充：10px；
边界半径：10px；
}
#睫毛膏{
位置：绝对位置；
左：0；
排名：0；
z指数：9000；
背景色：#000；
显示：无；
}
.Fecchar{
显示：块；
文本对齐：右对齐；
}

粪便
公式
诺姆：


森哈：


这将有所帮助
<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>


珍妮拉·莫代尔
$（文档）.ready（函数（）{
$（“a[rel=modal]”。单击（函数（ev）{
ev.preventDefault（）；
var id=$（this.attr（“href”）；
$（'睫毛膏'）.fadeIn（1000）；
$（'睫毛膏'）.fadeTo（“慢”，0.8）；
$（id.show（）；
});
$（“#睫毛膏”）。单击（函数（）{
$（this.hide（）；
$（“.window”）.hide（）；
});
$（'.fechar'）。单击（函数（ev）{
ev.preventDefault（）；
$（“#睫毛膏”）.hide（）；
$（“.window”）.hide（）；
});
});
.窗户{
显示：无；
宽度：300px；
高度：300px；
位置：绝对位置；
左：0；
最高：50%；
右：0；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转化：translateY（-50%）；
保证金：自动；
背景：#FFF；
z指数：9900；
填充：10px；
边界半径：10px；
}
#睫毛膏{
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
z指数：9000；
背景色：#000；
显示：无；
}
.fechar{显示：块；文本对齐：右；}
粪便
公式
诺姆：


森哈：



这是一个背景层，覆盖了屏幕的整个宽度和高度，你想要什么？要删除该层吗？根据您的代码，背景层必须覆盖屏幕的全宽和全高，它覆盖全宽和全高，有什么问题吗？您的英语很难理解：（我想做的是确保模式窗口的背景淡入度始终占长度和高度的100%，并且此比率不会改变。谢谢！这是帮助！高度和宽度属性可以用%而不是px表示？我们可以用%表示模型框的宽度和高度。高度将根据模型框的内容进行调整。