Open model button is also hiding with model on close

user_17131560 0
Viewed 112

I am building a model popup and implementing the close button to close the popup, so I created an on Click event to close the model. When I close the model, the model is successfully closing. But the Open Model button is also hiding.

I have tried many times. But it is hiding every time I run it. I also tried to remove the class, but it didn't work.

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>

As I mentioned in snippet, when you clicked on the Close Model the Open Model button also disappeared.

  • I also tried "hidden" instead of "none", but it is not even hiding the model.
css html jquery javascript
4 Answers

Try removing the open attribute from your details tag.

 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>

user_101174330

You wrap the Open Modal button and modal in one div (id=modelID).

When you click close modal, you set a display=none, so open modal button is hidden.

=> Like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modelID {
      display: none
    }
  </style>
</head>

<body>

  <div class="popupButton" onClick="openTheModel();">
    Show me the modal
  </div>
  <div class="popupContainer" id="modelID">

    <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>
  </div>
  <script>
    function openTheModel() {
      getting = document.getElementById('modelID');
      getting.style.display = "block";
    }
    function closeTheModel() {
      getting = document.getElementById('modelID');
      getting.style.display = "none";
    }
  </script>
</body>

</html>
user_172124090

You should setModelID on modal-detail and change background color of overlay when modal is closed:

function closeTheModel() {
    getting = document.getElementById('modelID');
    getting.style.display = "none";
    document.getElementsByClassName("details-modal-overlay")[0].style.backgroundColor='white';

}

function openModal(){
    getting = document.getElementById('modelID');
    getting.style.display = "block";
    document.getElementsByClassName("details-modal-overlay")[0].style.backgroundColor='rgba(15, 23, 42, 0.8)';
}
.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" >

  <details>
    <summary>
      <div class="popupButton" onclick="openModal()">
        Show me the modal
      </div>
      <div class="details-modal-overlay"></div>
    </summary>
    <div class="details-modal" id="modelID">
      <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>

user_127334770

Your modal contains both the buttons Open and Close. They are both inside the modal.

So it's a correct behavior right now.

Place the Open button outside the modal div.

<div class="popupButton">
    Show me the modal
 </div>

<div class="popupContainer" id="modelID">
<details>
<summary>
  
  <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>
user_22704920
Related