Question

我有一些生成对话框的代码。它可以是确认，确认等。

单击某个元素时会调用代码。例如，如果我点击垃圾桶图标，我会导致＆＃34;删除＆＃34;要创建和呈现的确认对话框。

请注意，我将对话框插入<body>中的第一个元素。这种方法很有效，除了有一些Y滚动的表单。滚动页面后，如果我显示对话框，页面将始终自动滚动到顶部，然后再显示对话框。

我认为position: fixed应该通过始终使元素相对于视口来阻止更改滚动位置，但它不会。

以下是创建动态对话框<div>的位置：

function CustomDialog(title, body, buttons){

  let bodyElement = document.querySelector("body");

  let dynamicShadowElement = document.createElement("div");
  dynamicShadowElement.id = "dialog-shadow";
  bodyElement.insertBefore(dynamicShadowElement, bodyElement.childNodes[0]);

  let dynamicOverlayElement = document.createElement("div");
  dynamicOverlayElement.id = "dialog-overlay";
  bodyElement.insertBefore(dynamicOverlayElement, dynamicShadowElement);

  let dynamicInnerHTML = "<div id='dialog-box'><div id='dialog-box-header'></div>";
  dynamicInnerHTML += "<div id='dialog-box-body'></div><div id='dialog-box-footer'></div></div>";

  dynamicShadowElement.innerHTML = dynamicInnerHTML;

  let dialogOverlay = document.getElementById("dialog-overlay");
  let dialogShadow = document.getElementById("dialog-shadow");
  let dialogBox = document.getElementById('dialog-box');
  let dialogBoxHeader = document.getElementById('dialog-box-header');
  let dialogBoxBody = document.getElementById('dialog-box-body');
  let dialogBoxFooter = document.getElementById('dialog-box-footer');

  dialogOverlay.style.display = "block";
  dialogShadow.style.display = "block";
  dialogBox.style.display = "block";
  dialogBoxHeader.innerHTML = title;
  dialogBoxBody.innerHTML = body;

  if (!buttons) {
    // Create a default button to close the dialog.

    buttons = [{
        onclick: () => { closeDialog(); },
        text: "Got it!",
        class: "btn-primary"
    }];
  }

  buttons.forEach( (button) => {
    let dynamicButtonElement = document.createElement("button");

    and so on...

这是CSS：

#dialog-overlay{
  background: #FFF;
  display: none;
  height: 100%;
  left: 0px;
  opacity: .6;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10;
}
#dialog-shadow{
  display: none;
  background: LightGray;
  border-radius: 7px;
  left: 10%;
  position: fixed;
  top: 150px;
  width: 80%;
  z-index: 10;
}

如何在不打扰页面当前滚动位置的情况下显示对话框？

CSS：显示隐藏元素＆＃34; position：fixed＆＃34;扰乱用户的Y-Scroll位置

0 个答案: