javascript - 打开模态按钮也隐藏在关闭模态时

Question

我正在构建一个模型弹出窗口并实现关闭按钮来关闭弹出窗口，因此我创建了一个on Click事件来关闭模型。当我关闭模型时，模型已成功关闭。但打开模型按钮也隐藏了。

我已经尝试过很多次了。但每次我运行它时它都会隐藏。我也尝试过删除该类，但没有成功。

function closeTheModel() {
    getting = document.getElementById('modelID');
    getting.style.display = "none";
}

.popupButton {
    appearance: none;
    background: #16a34a;
    border-radius: 0.25em;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    height: 3em;
    line-height: 3em;
    padding: 0 1em;
}

.popupButton:hover {
    background-color: #17ac4e;
}

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.details-modal {
    background: #fff;
    border-radius: 0.5em;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    left: 50%;
    max-width: 50%;
    pointer-events: none;
    position: absolute;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 75em;
    height: 20em;
    /* border-top: 10em; */
    text-align: left;
    max-height: 50em;
    display: flex;
    flex-direction: column;
}

.details-modal .details-modal-title {
    color: #111827;
    padding: 1.5em 2em;
    pointer-events: all;
    position: relative;
    width: calc(100% - 4.5em);
}

.details-modal .details-modal-title h1 {
    font-size: 2.10rem;
    text-align: center;
    font-weight: 490;
    line-height: normal;
}

.details-modal .details-modal-content {
    border-top: 1px solid blue;
    padding: 2em;
    pointer-events: all;
    overflow: auto;
}

.details-modal-overlay {
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.8);
    position: fixed;
    opacity: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

details[open] .details-modal-overlay {
    pointer-events: all;
    opacity: 0.5;
}

details summary {
    list-style: none;
}

details summary:focus {
    outline: none;
}

details summary::-webkit-details-marker {
    display: none;
}

code {
    font-family: Monaco, monospace;
    line-height: 100%;
    background-color: #2d2d2c;
    padding: 0.1em 0.4em;
    letter-spacing: -0.05em;
    word-break: normal;
    border-radius: 7px;
    color: white;
    font-weight: normal;
    font-size: 1.75rem;
    position: relative;
    top: -2px;
}

.popupContainer {
    text-align: center;
    max-width: 40em;
    padding: 2em;
}

.popupContainer > h1 {
    font-weight: 700;
    font-size: 2rem;
    line-height: normal;
    color: #111827;
}

.popupContainer > p {
    margin-top: 2em;
    margin-bottom: 2em;
}

.popupContainer sup {
    font-size: 1rem;
    margin-left: 0.25em;
    opacity: 0.5;
    position: relative;
}

<div class="popupContainer" id="modelID">

  <details>
    <summary>
      <div class="popupButton">
        Show me the modal
      </div>
      <div class="details-modal-overlay"></div>
    </summary>
    <div class="details-modal">
      <div class="details-modal-title">
        <h1>My details modal</h1>
        <b onclick="closeTheModel();">Close Model</b>
      </div>
      <div class="details-modal-content">
        <p>

        </p>
      </div>
    </div>
  </details>
</div>

正如我在代码片段中提到的，当您单击关闭模型时，“打开模型”按钮也会消失。

• 我还尝试了“hidden”而不是“none”，但它甚至没有隐藏模型。

Answer 1

尝试从详细信息标记中删除 open 属性。

 function closeTheModel() {
   //just remove the open attribute from the details element
    var detailsEle = document.getElementsByTagName("details");
    detailsEle[0].removeAttribute("open");
}

.popupButton {
     appearance: none;
     background: #16a34a;
     border-radius: 0.25em;
     color: white;
     cursor: pointer;
     display: inline-block;
     font-weight: 500;
     height: 3em;
     line-height: 3em;
     padding: 0 1em;
}
 .popupButton:hover {
     background-color: #17ac4e;
}

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}


 .details-modal {
     background: #fff;
     border-radius: 0.5em;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     left: 50%;
     max-width: 50%;
     pointer-events: none;
     position: absolute;
     top: 45%;
     transform: translate(-50%, -50%);
     width: 75em;
     height: 20em;
     /*border-top: 10em;*/
     text-align: left;
     max-height: 50em;
     display: flex;
     flex-direction: column;
}
 .details-modal .details-modal-title {
     color: #111827;
     padding: 1.5em 2em;
     pointer-events: all;
     position: relative;
     width: calc(100% - 4.5em);
}
 .details-modal .details-modal-title h1 {
     font-size: 2.10rem;
     text-align: center;
     font-weight: 490;
     line-height: normal;
}
 .details-modal .details-modal-content {
     border-top: 1px solid blue;
     padding: 2em;
     pointer-events: all;
     overflow: auto;
}
 .details-modal-overlay {
     transition: opacity 0.2s ease-out;
     pointer-events: none;
     background: rgba(15, 23, 42, 0.8);
     position: fixed;
     opacity: 0;
     bottom: 0;
     right: 0;
     left: 0;
     top: 0;
}
 details[open] .details-modal-overlay {
     pointer-events: all;
     opacity: 0.5;
}
 details summary {
     list-style: none;
}
 details summary:focus {
     outline: none;
}
 details summary::-webkit-details-marker {
     display: none;
}
 code {
     font-family: Monaco, monospace;
     line-height: 100%;
     background-color: #2d2d2c;
     padding: 0.1em 0.4em;
     letter-spacing: -0.05em;
     word-break: normal;
     border-radius: 7px;
     color: white;
     font-weight: normal;
     font-size: 1.75rem;
     position: relative;
     top: -2px;
}
 .popupContainer {
     text-align: center;
     max-width: 40em;
     padding: 2em;
}
 .popupContainer > h1 {
     font-weight: 700;
     font-size: 2rem;
     line-height: normal;
     color: #111827;
}
 .popupContainer > p {
     margin-top: 2em;
     margin-bottom: 2em;
}
 .popupContainer sup {
     font-size: 1rem;
     margin-left: 0.25em;
     opacity: 0.5;
     position: relative;
}

  <div class="popupContainer" id="modelID">

    <details>
      <summary>
        <div class="popupButton">
          Show me the modal
        </div>
        <div class="details-modal-overlay" id="divCloseID"></div>
      </summary>
      <div class="details-modal" id="modelCloseID">
        <div class="details-modal-title">
          <h1>My details modal</h1>
          <b onclick="closeTheModel();">Close Model</b>
        </div>
        <div class="details-modal-content">
          <p>
  
          </p>
        </div>
      </div>
    </details>
  </div>