Home > Blockchain >  Open model button is also hiding with model on close
Open model button is also hiding with model on close

Time：11-02

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

I have tried many times but it is hiding every time 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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

As you can see when you click on Close Model Open Model button also disappeared.

  • I also tried "hidden" instead of "none" but it is not even hiding the model

Any help would be much Appreciated. Thank You in Advance.

CodePudding user response：

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';

}
.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">
        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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You wrapper Open Modal button and modal in 1 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>

Page link：https//www.codepudding.com/Blockchain/175695.html

Prev:is there a way to check for the first match element when comparing two arrays without using loops in
Next:Grid area do not adapt to the container height
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding