Question

我有一个元素，我想从左边放置边距是101px。我是使用以下代码

完成的

$(document).ready(function(){
    if(document.getElementById('minimize-view-id').checked){
         $("#modal-dialog").css("right", "101px");
    }
});

这适用于全尺寸窗口但是当我最小化窗口并刷新元素时没有正确放置。

我该怎么办呢。

Answer 1

演示： http://so.devilmaycode.it/how-to-place-element-properily-on-size-of-window-changed/

$(function() {
    $(window).resize(function() {
        resize_margin();
    });

    $('#minimize-view-id').on('change', function(){
        console.log($('#minimize-view-id').prop('checked'));
        $.cookie('minimize_view_id', $('#minimize-view-id').prop('checked'));
        resize_margin();
    });

    resize_margin();

    function resize_margin() {
        var right = ($('#minimize-view-id').prop('checked') || $.cookie('minimize_view_id')) === true ? 101 : 0;
        $("#modal-dialog").css("right", right + "px");
    }
});

注意：这是基本代码;因为你正在刷新页面，你需要使用像coockie这样的东西来跟踪复选框，否则代码将无法正常工作。

所以伪代码如下：

当用户选中复选框时将其保存在coockie上，然后再显示该页面加载coockie并应用css ..

在我的代码中我使用了这个插件

https://github.com/carhartl/jquery-cookie

Answer 2

您可以使用$( window ).resize()方法使其正常工作。如果您想要从左边距101px放置元素，那么您可以按照以下方式执行此操作：

$(function(){
    function doResize() {
       if($('#minimize-view-id').checked){
            $("#modal-dialog").css("right", "101px");
        }
    }
    $(window).resize(function(){
        doResize();
    });
    doResize();
});

但是如果你想根据窗口宽度动态放置元素，那么你可以通过选中$( window ).width()来实现：

$(function(){
    function doResize() {
       var widthScreen = $( window ).width();
        if($('#minimize-view-id').checked){
            // Define your right margin as per widthScreen size and then assign that value in below code in place of `101px`
            $("#modal-dialog").css("right", "101px");
        }
    }
    $(window).resize(function(){
        doResize();
    });
    doResize();
});

希望这会对你有所帮助。

如何将元素按原样放置在窗口大小上

2 个答案: