How to make click hide popup button without js only in html and css?-CodePudding

How to put/place function click hide in popup button without js only through Html and CSS? I need the close button to close the popup as the x button closes the button.

is there a way to implement this in the HTML or CSS code?

at the bottom is an example of the code.

 <!doctype html>
<head>
</head>
<body>
 
 <div id="css-modal">
    <input id="modal"  type="checkbox" checked />
    <div >
      <label for="modal" ></label>
        <p><img src="./popup-logo.png" alt="" ></p>
      <h2>DISCLAIMER</h2>
      <p>This site is for recreational use only!
      </p>
      <div ><button >CLOSE</button></a></div>
    </div>
    <div id="overlay"></div>
  </div>
  </div>
  </body>
</html>

On the bottom, is the css code as a sample.

/* Main Styles */
body {
  background-color: #f5f5f5;
  color: #333;
  font-family: "Arial", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  opacity: 15;
}

#page-wrapper {
  padding: 1.5em;
}

p.center {
  text-align: center;
  color: #fff;
}

h1 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

/* Modal Styles */
#css-modal {
  bottom: 0;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  white-space: nowrap;
  padding: 1.5rem 1.6em!important;
  z-index: 99;
}

#css-modal h2 {
  color: #fff;
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.02em;
  padding: 0;
  margin-bottom: 0.5em;
  margin-top: 0;
}

#css-modal .css-modal-check {
  display: none;
  pointer-events: auto;
}

#css-modal .css-modal-check:checked ~ .css-modal {
  opacity: 1;
  pointer-events: auto;
}

#css-modal .css-modal {
  background: #B92101;
  border-radius: 3px;
  display: inline-block;
  width:600px;
  max-width:100%;
  min-height:300px;
  opacity: 0;
  padding: 2.7em;
  pointer-events: none;
  position: relative;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  z-index: 1;
}

#css-modal .css-modal p {
   text-align: center;
   color: #fff;
}

#css-modal .css-modal .close {
   color: #cca72f;
  position: absolute;
  right: 1em;
  top: 0.5em;
}

#css-modal .css-modal .css-modal-btn2 button {
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 1em;
}

#css-modal .css-modal-check:checked ~ #overlay {
  opacity: 0.8;
  pointer-events: auto;
}

#css-modal #overlay {
  background: #000;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.8s;
}

#css-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.close:after {
  color: #cca72f;
  content: "\0058";
  float: right;
  font-size: 1.75em;
}

#css-modal .btn2-primary {
  color: #fff;
  background-color: #cca72f;
}

#css-modal .btn2-primary:hover {
  background-color: #b39124;
}

#css-modal .btn2 {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  padding: 0.75em 1.25em;
  text-align: center;
}

CodePudding user response：

working with the code snipped you provided, I changed a few things to demonstrate how to accomplish this without js. Essentially you use the checkbox to manage state, and change the css display value depending on whether or not the checkbox is checked. You can use the label to trigger the checkbox. I also hid the checkbo itself so that it's not visible and the state is managed in the background. Hopefully this helps!

<head>
  <style>
    label > button {
      pointer-events: none;
      user-select: none;
    }
    
    .css-modal {
      display: none;
    }
    
    #modal {
      display: none;
    }
    
    #modal:checked ~ .css-modal {
      display: block;
    }
  </style>
</head>
<body>
 
 <div id="css-modal">
    <input id="modal"  type="checkbox" checked />
    <div >
      <p><img src="./popup-logo.png" alt=""  /></p>
      <h2>DISCLAIMER</h2>
      <p>This site is for recreational use only!</p>
      <div >
        <label for="modal" >
          <button >CLOSE</button>
        </label>
      </div>
    </div>
    <div id="overlay"></div>
  </div>
</body>

CodePudding user response：

/* Main Styles */
body {
  background-color: #f5f5f5;
  color: #333;
  font-family: "Arial", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  opacity: 15;
}

#page-wrapper {
  padding: 1.5em;
}

p.center {
  text-align: center;
  color: #fff;
}

h1 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

/* Modal Styles */

#css-modal {
  bottom: 0;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  white-space: nowrap;
  padding: 1.5rem 1.6em!important;
  z-index: 99;
}

#css-modal h2 {
  color: #fff;
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.02em;
  padding: 0;
  margin-bottom: 0.5em;
  margin-top: 0;
}

#css-modal .css-modal-check {
  display: none;
  pointer-events: auto;
}

#css-modal .css-modal-check:checked ~ .css-modal {
  opacity: 1;
  pointer-events: auto;
}

#css-modal .css-modal {
  background: #B92101;
  border-radius: 3px;
  display: inline-block;
  width:600px;
  max-width:100%;
  min-height:300px;
  opacity: 0;
  padding: 2.7em;
  pointer-events: none;
  position: relative;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  z-index: 1;
}

#css-modal .css-modal p {
   text-align: center;
   color: #fff;
}

#css-modal .css-modal .close {
   color: #cca72f;
  position: absolute;
  right: 1em;
  top: 0.5em;
}

#css-modal .css-modal .css-modal-btn2 button {
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 1em;
  user-select: none;
  pointer-events: none;
}

#css-modal .css-modal-check:checked ~ #overlay {
  opacity: 0.8;
  pointer-events: auto;
}

#css-modal #overlay {
  background: #000;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.8s;
}

#css-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.close:after {
  color: #cca72f;
  content: "\0058";
  float: right;
  font-size: 1.75em;
}

#css-modal .btn2-primary {
  color: #fff;
  background-color: #cca72f;
}

#css-modal .btn2-primary:hover {
  background-color: #b39124;
}

#css-modal .btn2 {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  padding: 0.75em 1.25em;
  text-align: center;
}

 <!doctype html>
 <head>
 </head>
   <body>
 <div id="css-modal">
    <input id="modal"  type="checkbox" checked />
    <div >
       <p><img src="./popup-logo.png" alt="" ></p>
      <h2>DISCLAIMER</h2>
      <p>This site is for recreational use only!
      </p>
     <div >
        <label for="modal" ></label>
          <label for="modal"><div ><button >Close</button></label></div>
      </div>
    </div>
    <div id="overlay"></div>
  </div>

    </body>
</html>