How to perfectly align a modal box in the center

Hey everyone, I could really use some help. I'm struggling to find the right formula to center this modal (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial) on my browser, which has a size of 1263X582. I've been trying to use the following formula in jQuery:

    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

So essentially, I would do 1263/2 - 395/2 for the top and 582/2 - 223/2 for the left, which would give me TOP:179.5 LEFT:434. However, when I inspect the element on the site to check if I'm correct, I get a different answer. I just want to confirm if my calculations are correct, or if there's a better way to solve this.

Thank you!

jquerycssjavascriptcentermodalpopupextender

Answer №1

Make sure to double check the formula to ensure the correct size for winH, winW, and the modal dimensions.

If the modal isn't visible, you may end up with a value of 0, or if it's outside the document window, it could display strangely.

Keep in mind that height() and width() do not account for padding, unlike outerWidth().

Pro tip: Save $(id) in a variable to improve the efficiency of your jQuery queries.

var modal = $(id);
modal.css('top', winH/2 - modal.height()/2);

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

Retrieve data from each URL listed in a JSON array using React

My json file structure was as follows: [ { "name": "google", "route": "/google", "url": "www.google.com" }, { "name": "bing", "route": " ...

javascriptreactjsjsonfetch

What is the best way to differentiate and analyze new AJAX output from previous data using div elements?

Embarking on a project to develop a high/low game using JavaScript, I encountered a perplexing issue where the displayed numbers seemed to be out of sync with the variables stored. This discrepancy left me scratching my head as I struggled to get them to a ...

javascriptajax

Create a CSS style that locks the first column of a table in place while allowing the rest of the columns to scroll horizontally on an HTML webpage

There are numerous solutions available for creating a table with frozen columns and scrollable content, such as: how do I create an HTML table with fixed/frozen left column and scrollable body? However, my specific requirement is to have the scroll bar o ...

htmlcsscss-tables

Sending data from an Angular application using AJAX to FormSpree.io

Currently, I am using a jQuery script to send ajax requests to for static form submission. The documentation provided by FormSpree suggests the following approach: $.ajax({ url: "//formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

javascriptjqueryajaxangularjs

Get the value of a node in jsTree

Here is the code I am currently using: for (i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).text.trim()); } alert('Selected: ' + r.join(', ')); The above code successfully retr ...

jqueryjstree

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet: import React from 'react' const MyComponent = () =&g ...

javascriptcssmaterial-uicomponentssizing

How can I resolve the vertical adjustment issue of Bootstrap 5 input group on mobile devices?

My current issue involves using Bootstrap 5.2.3 to create an input group that displays a set of spans with the ".input-group-text" class alongside inputs with the ".form-control" class. While this setup works well on a computer screen, it does not adjust c ...

javascriptjquerycssbootstrap-5

Utilize custom SMTP with JavaScript to dispatch emails

I'm wondering if it is possible to send emails using just JavaScript (I am working on a PhoneGap app). I envision a scenario where I can connect to a specific SMTP server with a login and password, and then send emails using that connection. I have al ...

javascriptcordovaemailsmtp

Position a div at the bottom of another div using Bootstrap

I'm facing an issue with trying to position an inner div at the bottom of an outer div using bootstrap classes. I have attempted various methods in both bootstrap and regular CSS, such as vertical-align: bottom; and setting position to absolute, but n ...

cssbootstrap-4

Resize the images and align them side by side

I have a container with a maximum width of 1400px. Inside this container, there are two images of different sizes. I want to align them in a row using flexbox so that they fit within the 1400px width and still maintain a visually appealing appearance as sh ...

htmlcssflexbox

Tips on transferring a numerical ID variable from one page to another by clicking a link

I need help with passing a variable from an auto-generated button to another page when the button is clicked. The buttons all have the same link but different variables. How can I achieve this? Once I generate the button, I assign it a function like so: ...

javascript

Using JavaScript Arrays to Make Labels in Chart.js

I am currently working with Chart.js and have a JavaScript array containing values that look like this: var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}'); I am passing the "obj" array to my Chart.js, filling out the ...

javascriptarrayschartslabel

Stop the npm start command with a specific error message if the file is not found in the repository

Can the npm start process be stopped or cancelled if a specific file is not found in your codebase? I am looking to end the process if the file dev-variables.js is missing, preferably displaying a custom error message like "You are missing the dev-variabl ...

javascriptnpmterminalconsole

Cease the ongoing Ajax request and switch to a new Ajax call immediately

Within this code snippet, I am capturing user input for typing and then searching it in a database. However, with each character entered by the user, a new AJAX request is triggered without canceling the previous one. My objective is to have the search fu ...

javascriptjqueryajax

What steps should I take to stop material-ui Select options from opening when clicking on specific parts of the selected option?

Presently, I am utilizing a Select component from @material-ui/core/Select, which contains only one option for simplification purposes, and the code snippet is as follows: <FormControl> <InputLabel id="demo-controlled-open-select-label">Test ...

javascriptreactjsdrop-down-menuonclickmaterial-ui

Struggling to align my Navbar items in one clean line, they seem to pile up and remain fixed on the left side. Utilizing ReactJS and MUi5

I'm struggling with aligning my Navbar items (NavLink) horizontally in one line instead of being stuck on the right side and stacked on top of each other. Can someone help me fix this issue? Here's the code snippet: import React from "react& ...

cssreactjsmaterial-ui

Error: The function 'fetch' is not recognized in Selenium Console

Having some trouble with Selenium and Chrome Developer Tools. I want to open Selenium, go to a URL, and then use driver.execute_script to make a fetch request via Console in Chrome Developer Tools within the Selenium window. However, when I try to run thi ...

javascriptpythonseleniumfetch

Material-UI LeftNav with a sticky header

I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav ...

cssmaterial-ui

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

Distinguishing factors between Python objects and JSON objects

At first glance, it may seem that Python has native support for JSON. However, the one exception is that JSON is able to store JavaScript functions. My dilemma is this: I require passing JSON to a Python file via the terminal. Is it advisable to use eval( ...

javascriptpythondjangojsonnode.js