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

usermvSY 0
Viewed 46

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" class="css-modal-check" type="checkbox" checked />
    <div class="css-modal">
      <label for="modal" class="close"></label>
        <p><img src="./popup-logo.png" alt="" class="center"></p>
      <h2>DISCLAIMER</h2>
      <p>This site is for recreational use only!
      </p>
      <div class="css-modal-btn2"><button class="btn2 btn2-primary btn-md">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;
}
model popup css html
2 Answers

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" class="css-modal-check" type="checkbox" checked />
    <div class="css-modal">
      <p><img src="./popup-logo.png" alt="" class="center" /></p>
      <h2>DISCLAIMER</h2>
      <p>This site is for recreational use only!</p>
      <div class="css-modal-btn2">
        <label for="modal" class="close">
          <button class="btn2 btn2-primary btn-md">CLOSE</button>
        </label>
      </div>
    </div>
    <div id="overlay"></div>
  </div>
</body>

async await0 

/* 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" class="css-modal-check" type="checkbox" checked />
    <div class="css-modal">
       <p><img src="./popup-logo.png" alt="" class="center"></p>
      <h2>DISCLAIMER</h2>
      <p>This site is for recreational use only!
      </p>
     <div class="css-modal-btn2">
        <label for="modal" class="close"></label>
          <label for="modal"><div class="css-modal-btn2"><button class="btn2 btn2-primary btn-md">Close</button></label></div>
      </div>
    </div>
    <div id="overlay"></div>
  </div>

    </body>
</html>

usermvSY0
Related