我遇到麻烦这个CSS

Question

我想要制作一个模态，我很难制作工具，关闭按钮出现在同一行。它应该如下图所示：

＆＃13;

＆＃13;

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

＆＃13;

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: realtive;
  display: inline-block;
  background-color: grey;
  width: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  display: inline;
  color: #aaa;
  float: right;
  font-size: 16px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

＆＃13;

<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p>tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

而且我还希望模态框的顶部具有如下图所示的样式。

Answer 1

我试了一下。

关闭按钮已经定位为绝对按钮，但没有tob/bottom/left/right值。您在cButton班级中也有拼写错误：position: realtive;。

顶部的三角形是使用css三角形形状的模态容器的before和after元素制作的（请参阅https://css-tricks.com/examples/ShapesOfCSS/）。我还将模态稍微偏移一点，为三角形留出空间并将其放在点击位置;）

您可以使用tob/bottom/left/right css属性放置模态，并使用模态的transform属性调整偏移量。

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(e) {
  modal.style.display = "block";
  modal.style.top = e.clientY+'px';
  modal.style.left = e.clientX+'px';
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  transform: translateY(12px);
}

.modal::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-bottom: 12px solid #55f;
  position: absolute;
  top: -11px;
  left: 0;
}
.modal::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 2px;
}

.modal-content {
  background-color: #fefefe;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: relative;
  display: inline-block;
  background-color: grey;
  width: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  display: inline;
  color: #aaa;
  font-size: 16px;
  font-weight: bold;
  top: 17px;
  right:4px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p>tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

Answer 2

将display:flex添加到.cButton类

.cButton {
  /*rest of code*/
  display:flex;
  align-items: center;
  justify-content: space-between;
}

您也可以从position:absolute课程中删除.close。

对于三角形，您可以使用border-left, border-right, border-bottom创建它。

检查代码段

＆＃13;

＆＃13;

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

＆＃13;

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: relative;
  background-color: grey;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cButton:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  right: 25px;
  top: -15px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #000;
}

.close {
  color: #aaa;
  font-size: 16px;
  font-weight: bold;
  padding-right: 10px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

＆＃13;

<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p>tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在下面的片段中，我删除了绝对位置，因为你不需要它。它完美地作为内联工作。这里的问题是你的p标签是一个块元素，所以我通过向它添加一个类并对其进行样式化来实现内联。请参阅下面的代码段。

也可以从关闭按钮中移除p，因为我不确定您是否希望它成为其中的一部分。

祝你好运。

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: realtive;
  display: inline-block;
  background-color: grey;
  width: 100px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.close {
  /*position: absolute; <-Remove this-->*/
  display: inline;
  color: #aaa;
  float: right;
  font-size: 16px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

p.boxtitle {
    display: inline;
}

<div id="myBtn">Open Modal</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div id="closeButton" class="cButton">
      <p class="boxtitle">tools</p>
      <div class="close">&times;</div>
    </div>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>

</div>

Answer 4

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61);
}

.cButton {
  position: relative;
  display: inline-block;
  background-color: #f7f7f7;
  width: 100px;
  border-top: 1px solid #f7f7f7;
  border-bottom: 1px solid #f7f7f7;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  text-indent:5px;
}

.close {
      position: absolute;
    display: inline;
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    top: 13px;
    right: 8px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

只需替换css你就会得到预期的结果