Javascript code experiences a shift in two different styles within a single conditional statement

I'm new to web design and I'm having trouble getting this code to work properly. Can anyone help me fix it so that both styles are applied correctly?

// Access the sign_up modal window
var modal = document.getElementById('id01');

// Access the container content 
var content = document.getElementById('container');

// When the user clicks anywhere outside of the modal, close the modal and remove blur effect on container content
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        content.style.filter = "blur(0)";
    }
}

Answer №1

This solution works perfectly. It seems like the only issue is that using blur(0) actually removes the blur effect (is this what you intended?).

I tested it out and verified that it works fine. You can also check the DOM in the console to see that the style is applied correctly.

In my example, I added a positive value to blur() to make the effect more visible.

Check out my demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to update this payload object?

Currently, I'm developing a route and aiming to establish a generic normalizer that can be utilized before storing user data in the database. This is the function for normalization: import { INormalizer, IPayloadIndexer } from "../../interfaces/ ...

An in-depth guide on implementing debounce functionality for `keyup` events in Vue.js

I am attempting to detect when the user begins typing and stops typing using the debounce function. I experimented with Lodash and Underscore.js. On my textArea v-on:keyup="handler($event)" handler: function(e) { ...

Dropdown arrow on triangle point not appearing correctly

My goal is to create enough space between the parent and dropdown menu using a triangle shaped pointer. This is what I am aiming for: This is what I have achieved so far: The CSS code for the triangle shape: .sf-menu ul li:first-child a:after { c ...

Update the displayed image on the webpage based on information retrieved from the database

Can someone help me figure out how to change the clickable icon on getseats.php from available to unavailable when a seat's status is 0? I'm struggling with this and any advice would be appreciated. Here's the code I have: <?php $noerro ...

Tips for detecting the creation of an iframe before executing any javascript code

Before executing some JavaScript, I am trying to wait for an iframe to be created. I have attempted several methods, but none seem to effectively wait for the iframe. The console error that keeps appearing is Uncaught (in promise) TypeError: Cannot read pr ...

Creating a Full-Width Dropdown in Bootstrap 4 Navbar: A Step-by-Step Guide

I'm attempting to create a dropdown that spans the full width of the screen and has a collapsible feature like many modern websites. However, I am having difficulty figuring out how to achieve this. I experimented with using Bootstrap's collapse ...

Is it possible to connect ng-model with a style tag?

Is it feasible to create a basic template editor using angularjs where an input field with an ng-model can be connected to a style tag to control the css on an entire page rather than applying it to a specific element with inline styling? Could something ...

Tips for choosing the node_modules distribution flavor to include in your webpack bundle

Issue: Following the update of AJV.js to Version 6.4, my vendor bundle now includes the "uri-js" ESNEXT version instead of the ES5 version, causing compatibility issues with IE11. Analysis: Upon investigation, I discovered that AJV references uri-js usi ...

What are the steps for implementing Babel in a CLI program?

Currently, I am working on developing a CLI program in Node using Babel. While researching, I came across a question on Stack Overflow where user loganfsmyth recommended: Ideally you'd precompile before distributing your package. Following this ad ...

Looking for a custom header logo that seamlessly blends with your image slider?

I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...

Whenever I try to access my Node.js API from Heroku's live server, I encounter a CORS policy error

Whenever I try to access my Node.js API from the Angular app (running on a local setup) and host the API on Heroku's live server, I encounter the following error: CORS policy: No 'Access-Control-Allow-Origin'. Interestingly, when I host the ...

How to preselect an item in a RadioGroup

We are facing a challenge in setting a default value automatically for a RadioGroup upon page load. Despite the documentation mentioning a defaultValue property (https://material-ui.com/api/radio-group/), it does not seem to work as expected. We experimen ...

What is the best way to extract a specific line from a command using a child process in a Node.js environment?

I am attempting to retrieve the disk space of a virtual machine using a child process in Node.js. Below is the code I have written for this purpose: const { exec } = require('child_process'); function diskSpace(err, result) { exec('df - ...

Store the active tab in AngularJS with Bootstrap to easily remember and display

After creating a basic AngularJS application with the Bootstrap directive, I noticed that some of my pages have tabs. The issue arises when I am on a tab other than the first one and click a link to navigate to another view. Upon returning (using either th ...

Looking to extract and upload a thumbnail image from an HTML5 video element

I am trying to extract and upload a thumbnail from an HTML5 video tag, Below is my code snippet: var w = 135;//video.videoWidth * scaleFactor; var h = 101;//video.videoHeight * scaleFactor; var canvas = document.createElement('canvas&apo ...

The Print Preview Displays No Content When an External Stylesheet Reference is Included in the Printable HTML Content

Is there a way to print the contents of a DIV on a webpage? Currently, I am using JavaScript to retrieve the contents of the div and then passing it to a new window object where I call the .print() function. The text contents and images are displayed corre ...

Unable to see my Vue component within Laravel

My Vue component is not appearing on the screen and I am unable to identify the issue. I have checked my console for errors and I am using npm run hot Here is my app.js file: require('./bootstrap'); window.Vue = require('vue').default ...

Tips for iterating through an array of images and displaying them in a React component

I am working on a project in my react app where I have 5 images that I want to cycle through indefinitely. The goal is to create an animation where a light bar appears to be constantly moving. https://i.sstatic.net/8tdfV.png The shifting dot in each imag ...

Tips for broadcasting a router event

Currently, I am working with 2 modules - one being the sidenav module where I can select menus and the other is the content module which contains a router-outlet. I am looking for the best way to display components in the content module based on menu selec ...

AngularJS - Custom directive to extract a property value from an object

Currently, I am using the following for loop to retrieve the parent category: angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); I am looking fo ...