Question

我有一个表单容器，希望通过单击使其触发并居中显示在窗口中央而不是文档中央。我的文档容器高度为5000px，所以我不希望它居中。我一直在搜索，但不是很好。这是我现在尝试过的。

.mrp-dynamic-form
{
position: absolute;
display: none;
background-color: blue;}

<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$(".mrp-dynamic-form").attr('style', 'display:block;');
$(window).height() - $('div.mrp-dynamic-form').height()) / 2
$(window).width() - $('div.mrp-dynamic-form').width()) / 2
$(".mrp-dynamic-form").css('z-Index','30');    
});
});
</script>

与此相关的任何形式，甚至都不可见。谢谢您的帮助。

Answer 1

您在高度/宽度位置计算中缺少开头'（'，这会导致JavaScript错误。您也没有将计算出的位置应用于.mrp-dynamic-form div（至少在您的示例中没有）我修复了语法错误，并将计算出的位置应用于.mrp-dynamic-form div：

$(document).ready(function() {
    $("a").click(function(event) {
        // keep the default behavior (navigate to a link) from happening
        event.preventDefault();
        // caculate the position that the .mrp-dynamic-form div should have
        let top = ($(window).height() - $('div.mrp-dynamic-form').height()) / 2;
        let left = ($(window).width() - $('div.mrp-dynamic-form').width()) / 2;

        // apply the css styles to position the .mrp-dynamic-form in the center of the window regardless of where you are on the page
        $('.mrp-dynamic-form').css({
            'position': 'fixed',
            'display': 'block',
            'top': `${top}px`,
            'left': `${left}px`,
            'z-index': '30'
        });
    });
});

.mrp-dynamic-form {
    position: absolute;
    display: none;
    background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="height: 5000px">
    <a href="">Click</a>
    <div class="mrp-dynamic-form">
        <form action="">
            First name:<br>
            <input type="text" name="firstname" value="John">
            <br>
            Last name:<br>
            <input type="text" name="lastname" value="Doe">
            <br><br>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>

我的容器不可见，我认为innerwidth，innerheight javascript代码编写不正确

1 个答案: