When the button is clicked, the pop-up div should appear in the center of the screen

I am having an issue with a button on my webpage. When clicked, a pop-up dialog box appears, but it is not centered on the current screen - I have to scroll up to view it and close it each time. I want the pop-up to appear in the center of the current screen no matter where on the page the button is clicked. Can anyone help me with this?

#blanket {background-color:#111;opacity: 0.65;position:absolute;z-index: 9001;top:0px;left:0px;width:100%;}

#popUpDiv {
position:absolute;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-top:-250px;
margin-left:-23px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px #000000;
z-index: 9002;}

Here is the HTML code:

<div id="blanket"></div>
<div id="popUpDiv">
<a href="javascript:void(0)" style="text-decoration: none" onclick="popup('popUpDiv')"><div align="right"><font color="green">close[X]</font>   </div></a>
<div align="center">Please Enter Your Area Pincode</div>
</div>

<input type="button" value="pincode" onclick="popup('popUpDiv');">

Is there a JavaScript function that can be added to solve this problem?

javascripthtmlcss

Answer №1

For proper alignment, make sure to adjust the top and left properties to 50%, and then set the margin to negative half of the height or width accordingly. To ensure the element stays in place when scrolling, utilize position: fixed; instead of position: absolute;

#popUpDiv {
position:fixed;
top: 50%;
left: 50%;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-left:-150px;
margin-top:-65px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}

Answer №2

To center the #popupDiv, simply apply margin-left:auto; and margin-right:auto;.

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

When viewing my project on GitHub pages, the images within the card are not appearing

After running my project page link at https://nayaksofia.github.io/RestaurantReviewTest1/, I've noticed that the images inside the card are not displaying. However, when I run the same project on my local server localhost:8000, the images appear just ...

javascripthtmles6-promiseservice-workerangular-service-worker

Which regular expression can match both the start and finish of a string?

I need help with editing a DateTime string in my TypeScript file. The specific string I'm working with is 02T13:18:43.000Z. My goal is to remove the first three characters, including the letter T at the beginning of the string, as well as the last 5 c ...

javascriptregextypescript

Is it possible to achieve Two-Way Binding in a custom directive without relying on NgModel?

I am creating a custom dropdown without using any input element or ngModel for two-way binding. Is it possible to achieve two-way binding with custom attributes? var mainApp = angular.module('mainApp', []); mainApp.directive('tableDropdo ...

javascriptangularjsangular-ngmodel

Including 'active' in an HTML button does not trigger the styles specified in the :active pseudo-class

When a button is clicked, I want its color to change. Below are the HTML elements in question: <div class='chatbot-container'> <div class='chatbot-wrapper' id='chatbot-wrapper' style="display:none;" & ...

javascripthtmlcss

Clicking the delete button will halt the process once the user cancels the confirm alert

The website is now capable of extracting API data and displaying it in a table. Additionally, users can delete rows from the table by clicking on a button. (pic) Table and alert display after clicking the delete button Q: If I click cancel on the alert, ...

javascripthtmljqueryajax

Creating a dynamic anchor scrolling effect within a dropdown select menu

Having trouble achieving smooth scrolling with a select option element, only works with a link. Any suggestions? Check out the jsfiddle demo to see what I mean! $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location. ...

javascriptjqueryhtml

Enhance your loader functionality by dynamically updating ng-repeat using ng-if

To better illustrate my issue, here is a link to the fiddle I created: https://jsfiddle.net/860Ltbva/5/ The goal is to show a loading message while the ng-repeat loop is still loading and hide it once all elements have been loaded. I referenced this help ...

javascriptangularjsangularjs-ng-repeatloaderangular-ng-if

displaying text next to an HTML image link on iOS devices

I am facing a situation where I need to display description text alongside images. Here is an example of what my description looks like: Test Article with Image and LinksTest Article with Image and Links<img alt="" src="http://stgen.eenaduindia.com/201 ...

htmliosobjective-ciphone

Transition color seamlessly from the left side to the right side upon hover

Here is a simple code snippet for creating a line that changes color on hover: li::after { height: 2px; display: block; background: rgb(195, 195, 195); border-right: 1px white; content: ''; } li:hover:after { position: relative; ...

cssanimationtransition

Styling the Menu Item with CSS

A graphic designer provided me with these elements to incorporate into the HTML design. Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items. If anyone ...

javascriptjqueryhtmlcss

After the page has finished loading, the JavaScript code is not able to

I have created a dynamic jobs list from a database that includes conditional salary reporting based on union type. I decided to build the dataset in the page load section of the CS page for output to a label on the ASPX page to handle the conditional state ...

javascriptjqueryasp.netpageloadpage-lifecycle

Viewing an image from a local file on a web browser

I am currently working on a project where I want the user to be able to select a local image that will then be displayed on the page. As someone who is new to web development, I did a lot of research and found some helpful information on StackOverflow. I t ...

htmlimageangulartypescriptfilereader

Ways to troubleshoot the issue of undefined navigator / window / document in Nuxt

I encountered an issue while trying to extract UserAgent and Retina information within a Nuxt application. The error message I'm receiving states that navigator/window is undefined. How can I retrieve this information within my Nuxt application? const ...

javascriptvue.jsnuxt.js

when webpack loads the bundle.js file, the mime type is converted to text/html

I'm currently working on implementing server side rendering for an application using react-redux and express for the server. We are also utilizing webpack to bundle our assets. To get started, I referred to the following documentation: https://redux ...

javascriptexpressreact-reduxserver-side-renderingserverside-javascript

Utilizing Vue and Websockets for seamless communication: Managing the exchange of messages between users

In an attempt to create a messaging system that shows alerts of messages to different users, I have implemented Vue Socket Io from https://www.npmjs.com/package/vue-socket.io. However, the issue lies in the fact that the alerts are not being triggered as e ...

javascriptvue.jsvuejs2socket.io

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

jqueryhtmltwitter-bootstrap

Verify the requests in node.js with Wordpress authentication

I am working on building a web application that consists of both a Wordpress site and a node.js application. I specifically chose to use Node because of the capabilities of socket.io, while Wordpress serves my needs for many other reasons. It's essent ...

javascriptphpwordpressnode.jsauthentication

Retrieve information from a cell containing HTML formatting

Is there a way for me to save a specific text from a cell in Google Sheets into a variable, and then use it to send an email with the text formatted within an HTML table? For example: Cell in Google Sheets: "Lorem ipsum dolor sit amet. Ut tenetur a ...

htmlgoogle-apps-scriptgoogle-sheets

Challenge with delayed function execution in AngularJS

In my Angular application, I am encountering a problem in the following scenario. There are three crucial files: MainCtrl.js Upon loading the application, the init() function in MainCtrl.js is triggered, which then calls the flowService as shown below: ...

javascriptangularjsajaxasynchronous

Attempting to display numerous react components on various divs instead of just one ID

Currently, I am facing a challenge in creating multiple react comment boxes. The package I am using is based on #id instead of class, which resulted in only rendering one box instead of all. To resolve this issue, I attempted to switch from GetelemntbyID t ...

javascriptreactjs