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

Html – Unblur when popup button is pressed?

I’m making a neocities site, and I want the page to have a warning popup(first container) that the user will have to click an "enter" button on in order to unblur the content(second container), background, see the content. I’m extremely new to all of this and help would be greatly appreciated!(I have images to show what I’m trying to do, but can’t post them yet, lol.)

I’m not sure where to even start. I’ve tried different popup codes, but none fit what I was trying to achieve.

Tags:

2

Answers


  1. 0

    I’ll try to explain it as best I can for someone new…

    In CSS there are 2 ways to create a blur effect, but in your case the best property will be filter: blur([n]px); where n is a number. With exception to a div where you have your popup, put the rest of your body into a main tag. This may look something like the following:

    <body>
  <div class="popup">
    <p>Warning!</p>
  </div>
  <main style="filter: blur(10px);">
    <p>graphic text</p>
    <!-- rest of body below -->
  </main>
</body>

    From here In order to unblur the content the user is going to need some type of input. Namely a button, and that button in JavaScript is going to need to get rid of the filter: blur(10px);. The easiest way to do this is to modify the filter: blur(10px); line of css into filter: blur(0px);. One example of executing this may be

    <body>
  <!-- Adding display so that I can change the display to this div to "none" after the button is clicked so it isn't stuck on your screen -->
  <div class="popup" style="display: block;">
    <p>Warning!</p>
    <button type="button" id="warning-button">I consent</button>
  </div>
  <main style="filter: blur(10px);" class="web-content">
    <p>graphic text</p>
    <!-- rest of body below -->
  </main>
  <script>
    // When you have classes in CSS you cannot use getElementById, so you should use the querySelector funtion instead.
    const main = document.querySelector(".web-content");
    const popup = document.querySelector(".popup");
    const WARNING_BUTTON = document.getElementById("warning-button");
    WARNING_BUTTON.addEventListener("click", function() {
      main.style.filter = "blur(0px)";
      popup.style.display = "none";
    });
  </script>
</body>

    There are alternate ways to do this, but this is the simplest one to explain as the code speaks for itself, even for someone new. Hope this solution helps!

    Login or Signup to reply.
  2. 0

    First, you need to create two containers in your HTML file: one for the popup and the other for the content.

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="popup">
        <h2>Warning</h2>
        <p>This is a warning message.</p>
        <button id="enterButton">Enter</button>
    </div>
    <div id="content">
        <h1>Welcome to my site!</h1>
        <p>This is some content.</p>
    </div>
</body>
</html>

    CSS file (styles.css):

    #content {
    filter: blur(10px);
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid black;
    background-color: white;
}

#enterButton {
    display: block;
    margin-top: 20px;
}

    JavaScript:

    <script>
document.getElementById('enterButton').addEventListener('click', function() {
    document.getElementById('popup').style.display = 'none';
    document.getElementById('content').style.filter = 'none';
});
</script>

    Here is code pen link

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

Back To Top
Search