Modify CSS using Javascript by targeting the class of ".modalDialog > div {}"

I am currently working on a project that involves creating a Modal Layer using CSS. I have successfully implemented the modal layer, but now I need to figure out how to change the width from the default 400px to something else when I open it with Javascript. Can anyone guide me on how to achieve this?

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<video width="640" height="480" id="notes_video" controls fullscreen>
<source src="video/Opening.webm" type="video/webm">
<track kind="subtitles" src="opening.vtt" srclang="de"></track>
Your browser does not support the video tag.
</video>
</div>
</div>

CSS-Code:

.modalDialog > div {
    width: 400px;
}

Your assistance would be greatly appreciated. Thank you.

javascriptcss

Answer №1

Adjust the width of the $(".modalDialog") element to be 10 pixels.

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

Using VueJS to switch classes on multiple cards

There is a page with multiple cards, each containing its own set of status radio buttons: ok, missing, error. The goal is to be able to change the status of individual cards without affecting others. A method was created to update the class on the @change ...

javascriptvue.js

Triggering a new window on button click with Vue and Nuxt

Having an issue with a button click event in Vue that opens a PDF using window.open(). It's working well on all browsers except for Safari on MAC. Any ideas what could be causing this? Should I pass $event to the method? <div class="button-do ...

javascriptvue.jsnuxt.js

Is it possible to use jQuery validate for remote parsing with two fields in a single call

Currently, I am facing an issue while trying to parse two values using jQuery's validate plugin to compare with an SQL database. The DateReceived value is successfully parsed, but the CentreID value always appears as null. Below is the code snippet I ...

javascriptphpjquerysqlvalidation

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

Running a command once the forEach loop is completed in Angular

Within the HTML, I have a function that is triggered by an ng-click: vm.items = []; vm.moveItems = function() { angular.forEach(vm.items, function (item) { $http({ method: 'PUT', url: &apos ...

javascriptangularjsasynchronous

employ the inverse Euler application

var a = new THREE.Euler( 0, 1, 1.57, 'YXZ' ); var b = new THREE.Vector3( 1, 0, 1 ); var c = b.applyEuler(a); In order to get the value of c using b.applyEuler(a), I am looking for the reverse operation involving applyEuler. Given that the value ...

javascriptthree.js

When a React page is re-rendered using useEffect, it automatically scrolls back to the

Every time I utilize the <Tabs> component, the onChange method triggers the handleTabChange function. This leads to the component being called again and after repainting, the useEffect is triggered causing the page to scroll back to the top. How can ...

javascriptreactjstabsmaterial-uireact-hooks

Incorporating unique HTML5/iframe widgets into your Facebook Timeline and Tab Pages

I have a unique widget that users can easily integrate into their websites using the HTML/iframe code generated by my app. Now, I am looking for a way to allow users to also add this widget to their Facebook Company Pages. The widgets are accessible th ...

javascripthtmlfacebookwidget

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

javascripthtmlangularjs

Using the keyof lookup in a Typescript interface is a powerful way to

I'm looking for a solution similar to: interface Operation<T, K extends keyof T> { key: keyof T; operation: 'add' | 'remove'; value: T[K]; } but without the necessity of passing K as a template. Essentially, I want to ...

javascripttypescript

Directing JSON POST Request Data to View/Controller in a Node.js Application

Currently, I am working on a project hosted on a local server at http://localhost:3000/. This server receives a post request from another server in the following manner: return requestLib.post({ url: 'http://localhost:3000/test', timeout ...

javascriptangularjsnode.jsexpresspost

Toggle a v-if variable within the created() lifecycle hook in the VUE 3 framework

I'm working on a component with 3 buttons, where initially only 2 are visible. <template> <button v-show="!showLogout" @click="login('google', 'profile, email')"> Google </button> &l ...

javascriptvue.jsvue-componentvuejs3hello.js

Words within a string are divided in the center, with JS and CSS involved

I'm currently working on developing a hangman game in JavaScript (I am new to web technologies) and I have come across my first challenge. The placeholder string for the word to be guessed, which consists of hyphens and spaces, is overflowing from the ...

javascriptcsscss-hyphens

Using jQuery to add or remove multiple classes at once

My navigation tabs use jQuery to add and remove classes for the active tab. However, I'm facing an issue where the active class is not removed when a new tab is clicked or when the user scrolls to a new section. Please refer to the following gist for ...

jqueryhtmlcss

Add some texture to one side of the quadrilateral

I have a project in threejs where I need to display an image of a cat within a rectangle. The challenge is to render the right half of the rectangle in red, while displaying the full stretched image of the cat on the left half. Here's my current scen ...

javascriptthree.jswebgltextures

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

Step-by-step guide on incorporating CSS box-shadow with the .style JavaScript property

I have a JavaScript code snippet that looks like this: document.getElementById("imgA").style.box-shadow = "0 0 5px #999999"; The hyphen in box-shadow is causing an invalid assignment exception to be thrown by the JavaScript engine (specifically in Firefo ...

javascripthtmlcss

"Create sleek and stylish forms with Bootstrap's horizontal

I am attempting to create a horizontal form in Bootstrap using the code provided in their documentation. The example they show has input boxes filling the entire column space, but for some reason this is not happening when I try it, even after copying the ...

htmlcssbootstrap-4

Exploring the Power of jQuery's Vote-Object and Scope

This is a coding dilemma related to JavaScript. The reference to this particular website is not necessary and therefore does not pertain to meta. In my current project, I am developing a Greasemonkey script that automatically loads more answers onto the i ...

javascriptjqueryscopegreasemonkey

Locating a record within a database that contains an objectId field linking to a separate collection

I have defined two collections in the following manner const BookSchema = new mongoose.Schema({ title: String, author: { type: mongoose.Object.Types.ObjectId, ref: "author" } }) const BookModel = mongoose.model(" ...

javascriptnode.jsmongodbexpressmongoose