什么在我的页面底部创建额外的空间？

问题描述 投票：0回答：3

我无法遵守。最小段落长度约为 50 个字符。

javascript html css simplemodal
3个回答
0
投票

问题是您没有正确定位模态。本质上，您希望模态框位于屏幕中央。我们可以通过使用值 top: 50% 和 

left: 50%
的 
absolute
定位来启动此过程。伟大的！这让我们到达了那里的一部分，但不是整个那里，正如您可能注意到的那样，只有这个变化，模态不是居中的（只有模态的左上角）。原因是因为元素的原点是左上角而不是中心，所以它使模态的左上角居中。然后你可以做的是使用 CSS 变换来偏移原点并将其移回到需要的位置，在每个方向上
-50%
。本质上，这是所需的 CSS 更改（其余代码都可以）：

.modal-container {
  width: 100%;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

本质上：

  • 使用绝对定位将模态置于中心（50%、50%）
  • 使用 CSS 变换将 X 和 Y 坐标“平移”回 (-50%, -50%)

我已经用工作解决方案分叉了你的小提琴：https://jsfiddle.net/f34nqh1r/

我还提供了一个 CodePen，用于说明我通常喜欢如何执行模式，其中包括对可滚动内容的支持。 https://codepen.io/tinacious/pen/qeWMzB

您获得额外空间的原因是因为您使用的是相对定位，这不会将其从原始流程中拉出来。您提出了 500px 的要求，要求在文档流程中始终在底部有 500px。所以你得到额外间距的原因是

position: relative; bottom: 500px;

0
投票

出现空白的原因是您的容器和模态容器都是显示块。您可以通过从 .modal-container 中删除 Bottom: 500px 来看到问题

解决方案：

.modal-container{ position: absolute; top: 0; }

0
投票

将模态容器位置更改为 

absolute
，并使用 
bottom:500px
代替 
top:65px
。您可以进行更多更改以使其看起来不错。

.modal-container {
    position: absolute;
    top: 65px;
    width: 30%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

请参阅下面的片段：

const randomURL='https://randomuser.me/api/?results=12&nat=us';
const container=document.querySelector('.container');
const header=document.createElement("header");
const main=document.querySelector('main');
const modalContainer=document.querySelector('.modal-container');

header.innerHTML=`<h3 class="header">Awesome Startup Employee Directory</h3>`;
container.appendChild(header);

function fetchData (url) {
  return fetch(url)
  .then(resp=>resp.json())
  .catch(Error());
}
function generateHTML (data) {
  fetchData(data)
  .then(function(data){
    let results=data.results;
    return results.map(function(result,index){
      html=`
      <div class="item ${index}">
        <div class="card">
          <img src=${result.picture.thumbnail}>
          <div class="text-container">
            <h4>${result.name.first} ${result.name.last}</h4>
            <p>${result.email}</p>
            <p>${result.location.city}</p>
          </div>
        </div>
      </div>
      `;
      overlayHtml=`
      <div class="modal ${index} off">
        <div class="arrow">
          <i class="fa fa-window-close" aria-hidden="true"></i>
        </div>
        <div class="box-container">
          <div class="box one">
            <img src="${result.picture.thumbnail}">
            <h4>${result.name.first} ${result.name.last}</h4>
            <p>${result.email}</p>
            <p>${result.location.city}</p>
          </div>
          <div class="box two">
            <p>${result.cell}</p>
            <p>${result.location.street} ${result.location.postcode}</p>
            <p>${result.dob.date}</p>
          </div>
        </div>
      </div>
      `;
      main.lastElementChild.insertAdjacentHTML('afterend', html);
      modalContainer.insertAdjacentHTML('beforeend', overlayHtml);
    })
  }).then (function (data) {
      const modals=document.querySelectorAll('.modal');
      const modalsArray=[...modals];
      console.log(modalsArray);

      const arrow=document.querySelectorAll('.arrow');
      const arrowArray=[...arrow];
      console.log(arrowArray);
  })
}

generateHTML(randomURL);
document.addEventListener('click', function (e) {
  e.stopPropagation();
  e.preventDefault();
  if (e.target.classList.contains("item")) {
    itemIndex=e.target.classList.item(1);
    const modals=document.querySelectorAll('.modal');
    const modalsArray=[...modals];
    console.log(itemIndex);
    console.log(modalsArray);
    modalsArray.filter(function (modal) {
      if (modal.classList.item(1)===itemIndex) {
        modal.classList.add('on');
        modalContainer.classList.remove('off');
        modalContainer.classList.add('on');
      }
    })
  }
});
* {
  box-sizing: border-box;
}

body {
  background-color: rgb(243, 243, 243);
  font-family: 'Roboto', sans-serif;
}
p {
  color: #444E55;
}

.container {
  margin: 0 auto;
  width: 95%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px;
  grid-auto-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

header {
  grid-column: 1/span 3;
  color: #4A4A4A
}

img {
  display: block;
  border-radius: 50%;
  height: 100px;
}
.item {
  padding: 12px;
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
}
.item:hover {
  cursor: pointer;
}
.item > * {
  pointer-events: none;
}

.card {
  border-radius: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text-container {
  line-height: 0;
  margin-left: 10px;
}

/*.modal-container { //Override your style
  position: relative; 
  bottom: 500px;
}*/
.modal-container {
    position: absolute;
    top: 65px;
    width: 40%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.modal {
  background-color:  #ffffff;
  border: 1px rgb(197, 197, 197) solid;
  border-radius: 3px;
  padding: 50px;
  margin: 0 auto;
  z-index: 99;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box.one {
  border-bottom: 1px grey solid;
}

.arrow {
  display: inline-block;
  position: relative;
  left: 100%;
  bottom: 30px;
}
.arrow:hover {
  cursor: pointer;
}

.fa.fa-window-close {
  font-family: fontAwesome;
} 

.off {
  display: none;
}
.on {
  display: block;
}
<html !DOCTYPE>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Employee Directory</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <main class="container">
    </main>

    <div class="modal-container off">

    </div>
    <script src="app.js" ></script>
  </body>
</html>

您也可以在这里进行测试

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.