Question

经过大量研究后，当模态窗口打开时，我unable to find a proper solution为转移到固定定位元素右侧，覆盖图像和标准内容。

注意：我正在寻找一个通用的，干净的解决方案，而不是仅适用于特定布局的硬编码修复。

有谁知道如何解决这个问题？请参阅此示例：http://codepen.io/microcipcip/pen/kXdRWK

body {
  height: 2500px;
  &.-modal-open {
      overflow: hidden;
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: #FF0000;
}
.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    body.-modal-open & {
        opacity: 1;
    }
}

Answer 1

解决方案非常简单，并且是纯css修复：

> rf.5.cv.1
# Random Forest
# 891 samples
# 6 predictor
# 2 classes: '0', '1'
# No pre-processing
# Resampling: Cross-Validated (10 fold, repeated 10 times) 
# Summary of sample sizes: 802, 802, 803, 801, 801, 802, ... 
# Resampling results across tuning parameters:
# mtry Accuracy Kappa 
# 2 0.8383655 0.6496840
# 4 0.8289433 0.6339793
# 6 0.8219857 0.6196764
# Accuracy was used to select the optimal model using the largest value.
# The final value used for the model was mtry = 2. 
library(rpart)
library(caret)
library(snow)
library(doSNOW)

data.combined <- read.csv("data_combined.csv")
rf.label <- as.factor(data.combined[1:891,]$Survived)
cv.10.folds <- createMultiFolds(rf.label,k = 10,times = 10)
ctrl.1 <- trainControl(method = "repeatedcv", number = 10, repeats = 10,
               index = cv.10.folds)

rpart.cv <- function(seed, training, labels, ctrl) {
            set.seed(seed)
            cl <- makeCluster(6, type = "SOCK")
            registerDoSNOW(cl)
            rpart.cv <- train(x = training,
                              y = labels,
                              method = "rpart",
                              tunelength = 3, trControl = ctrl)
            stopCluster(cl)
            return(rpart.cv)
            }

features <- c("Pclass","Title", "Sex","Fare","Age","Family.Size")
rpart.train.1 <- data.combined[1:891,features]
rpart.1.cv.1 <- rpart.cv(1287, rpart.train.1, rf.label, ctrl.1)
# Something is wrong; all the Accuracy metric values are missing:
# Accuracy Kappa 
# Min. : NA Min. : NA 
# 1st Qu.: NA 1st Qu.: NA 
# Median : NA Median : NA 
# Mean :NaN Mean :NaN 
# 3rd Qu.: NA 3rd Qu.: NA 
# Max. : NA Max. : NA 
# NA's :3 NA's :3 
# Error in train.default(x = training, y = labels, method = "rpart",      
# tunelength = 3, : 
# Stopping
# In addition: Warning message:
# In nominalTrainWorkflow(x = x, y = y, wts = weights, info = trainInfo, :
# There were missing values in resampled performance measures.
# Called from: train.default(x = training, y = labels, method = "rpart",     
# tunelength = 3, 
# trControl = ctrl)
# Browse[1]> Q
# >

..但是，这要求您的内容采用不同的样式。你不应该为你的内容使用保证金，而是将其包装在一个容器中，而是使用填充。

滚动条的宽度并不总是17px ... 17px用于Firefox，但15px用于chrome，有时IE甚至没有滚动条宽度，具体取决于代码。

这是更新后的笔： http://codepen.io/scooterlord/pen/KgKLwB

编辑：忘了说，这是一个跨浏览器的解决方案，并且在我测试它的任何地方都可以完美运行。如果浏览器是移动的，那么无论是添加/删除额外的滚动条，都不会发生宽度变化，并且根据浏览器，新创建的内容/固定元素的滚动条始终与初始的主体滚动条相同。

Answer 2

主要技巧是不使用body作为内容包装器。使用专用div作为包装器并将模态放在外面，这样滚动条就不会相互干扰。

＆＃13;

var $btnShow = document.querySelector('.show');
var $btnHide = document.querySelector('.hide');
var $body = document.querySelector('.modal');
$btnShow.addEventListener('click', function() {
    $body.classList.toggle('-modal-open')
});
$btnHide.addEventListener('click', function() {
    $body.classList.toggle('-modal-open')
});

＆＃13;

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  overflow: auto;
}
.content {
  background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1');
  background-size: cover;
  background-position: center center;
  height: 2500px;
  width: 100%; 
}

.clickme {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  border: none;
  background: #000000;
  color: #ffffff;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.clickme:hover {
  background: grey;
  cursor:pointer
}

.modal {
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  transition: opacity .2s ease-in-out;
  z-index: 3;
}
.modal.-modal-open {
  display:block;
}
.modal-content {
  min-height: 1500px;
  margin: 100px;
  background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1');
  background-size: cover;
}

＆＃13;

<div class="modal">
    <div class="modal-content">Content
    <button class="clickme hide">Toggle Modal HIDE!</button>
    </div>
</div>
<div class="wrapper">
    <div class="content">
<button class="clickme show">Toggle Modal SHOW!</button>
    </div>
</div>

＆＃13;

Answer 3

每次打开模态时，如何向身体添加17px右边距。这将模拟为滚动条保留的空间。（17px是标准浏览器宽度的宽度）

body.-modal-open {
    margin-right: 17px;
}

同时，对于固定元素，您重新计算宽度;

.-modal-open .fixed {
    width: calc(100% - 17px);
}

但仍然存在一个问题，CSS背景图像仍在移动，解决方案只是将其放在div容器而不是正文中。

模态固定位置内容移位

3 个答案: