Html Question posted in
Some basic documentation can be found here.

Popup HTML: The content is not showing when the button is clicked

The popup content isn’t showing on click.
I will only put the shortened version of the code.
When the button is clicked, the content should be showed.
The html button will trigger the js code to set the css to active.
The css will show the active version of the popup that makes it visible.

function togglePopup() {
  document.getElementById("popup_chicken").classList.toggle("active");
}
.chicken {
    background: rgb(0, 0, 0, 0.5);
    width: 100%;
    height: auto;
    text-align: center;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0);
    visibility: hidden;
    &_content {
        display: inline-block;
        background-color: black;
        border-radius: 30px;
        box-shadow: -5px 5px 10px black;
        padding: 20px;
        width: 80%;
        margin-top: 3%;
        margin-bottom: 3%;
        &_buttons {
        margin: 15px 0;
        &_close {
            background-color: $b;
            cursor: pointer;
            border-radius: 50px;
            border-style: hidden;
            padding: 20px 30px;
            margin: 0 25px;
    }
    .chicken.active .chicken {
        transform: translate(-50%, -50%) scale(1);
        transition: all 300ms ease-in-out;
        visibility: visible;
    }
}
<button onclick="togglePopup()">
click me!
</button>

<div class="chicken" id="popup_chicken">
  <div class="chicken_content">
    content here
    <button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
   </div>
</div>
Tags:

2

Answers


  1. 0

    I am not sure if this is what you want, but you can give this a try;

    function togglePopup() {
  var element = document.getElementById("trt2");
  element.classList.toggle("mystyle");
}
    .mystyle {
        transform: translate(-50%, -50%) scale(1);
        transition: all 300ms ease-in-out;
        visibility: visible;
    }
    <button onclick="togglePopup()">click me!</button>

<div class="chicken" id="trt2">
  <div class="chicken_content" id="trt">
    content here
    <button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
   </div>
</div>
    Login or Signup to reply.
  2. 0

    Your nested css should be as follow. For more info pls follow this link for more details

    function togglePopup() {
  document.getElementById("popup_chicken").classList.toggle("active");
}
    .chicken {
  background: rgb(0, 0, 0, 0.5);
  width: 100%;
  height: auto;
  text-align: center;
  z-index: 2;
  transform: translate(-50%, -50%) scale(0);
  visibility: hidden;
    & .chicken_content {
        display: inline-block;
        background-color: black;
        border-radius: 30px;
        box-shadow: -5px 5px 10px black;
        padding: 20px;
        width: 80%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    & button {
    margin: 15px 0;
    color: red;
    }
    & .chicken_buttons_close {
        background-color: gray;
        cursor: pointer;
        border-radius: 50px;
        border-style: hidden;
        padding: 20px 30px;
        margin: 0 25px;
  }
  &.active{
    transform: translate(-50%, -50%) scale(1);
    transition: all 300ms ease-in-out;
    visibility: visible;
  }
}
    <button onclick="togglePopup()">
    click me!
    </button>
    
    <div class="chicken" id="popup_chicken">
      <div class="chicken_content">
        content here
        <button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
       </div>
    </div>

    .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search