Need help with centering a jquery popup on a webpage? I'm struggling with positioning it in the middle of the page, regardless of site adjustments or resolution changes. Currently, I have it set to absolute positioning with CSS, but the issue is that the overlay doesn't move when the page is scrolled or resized based on the content. Is there a jquery solution to ensure the popup is always centered in the window?
Appreciate any advice, thank you!
To achieve centering a div in the window, CSS can be used without the need for jQuery.
<div class="mydiv"></div>
.mydiv{
width:300px;
height:300px;
background:red;
position:fixed;
top:50%;
left:50%;
margin-top:-150px; /* negative half the size of height */
margin-left:-150px; /* negative half the size of width */
}
To obtain the dimensions of the window, you can use the following code snippet:
var wWidth = $(window).width();
var wHeight = $(window).height();
Next, you can determine the dimensions of your popup as follows:
var popupWidth = $('#popupId').width();
var popupHeight = $('#popupId').height();
Perform some calculations:
var popupTop = (wHeight/2) - (popupHeight/2);
var popupLeft = (wWidth/2) - (popupWidth/2);
Finally, position your popup element:
$('#popupId').css({'left': popupLeft, 'top': popupTop});
Although not tested, this approach should give you an idea of how to proceed.
//edit By the way, using CSS positioning might yield similar results. If you wish for the popup to reposition as the page moves, encapsulate the code into a function and invoke it on relevant page events.
Using CSS, achieving this is entirely possible. When the popup box is absolutely positioned, adjust the left attribute to 50% and margin-left to a negative value equivalent to half the width of the box.
To achieve this effect, one method is to ensure that the overlay remains centered regardless of window resizing. Here's a useful technique:
var overlay = $("#overlay"),
top = $(window).scrollTop() - (overlay.outerHeight() / 2),
left = -(overlay.outerWidth() / 2);
overlay.css({'margin-top': top,'margin-left': left});
You can also apply the following CSS rules (optional: use position fixed and remove scrollTop from the JavaScript):
#overlay {
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
}
I have set up my next.config.js file with the following configuration: const withSass = require('@zeit/next-sass'); const withCss = require('@zeit/next-css'); module.exports = withSass(withCss({ webpack (config) { config.module. ...
I have a modal on my website that currently redirects to the homepage when the close button is clicked. However, I also want it to redirect to the homepage when clicking outside of the bootstrap modal, specifically targeting the ".modal-content" class. I ...
I encountered a situation where I need to reorder items in an array based on the property minLVL of each object within the array. However, I have discovered that this reordering only works if the previous and next items have the required minLVL field. If ...
I've recently started the process of converting my create react app to next.js. As a reference, I've been using Vercel's open source Next.js website to help me structure my own. In order to implement custom fonts, I created a font.ts file an ...
I'm currently using Next.js to develop a web application with authentication and global user state. When a user signs in, I want to display their username in the navbar and pass the user state to child components for API calls requiring user informati ...
Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...
I am trying to implement private routing validation using the following code: import React from 'react'; import { Route, Redirect } from 'react-router-dom'; import routes from '../../routing/routes'; export default function ...
Hey there! I'm facing an issue with displaying the content of an object on my HTML page using React. So, here's what's happening: I can access the frontend properties in my object array, but when I try to loop through each element and displa ...
I am looking for a way to maintain the state of a checkbox even after navigating away from the page in an AngularJS and bootstrap environment. Currently, I find that my bound variable gets reset to false every time I reload the page when the controller run ...
I am currently working with the following loop: <?php if( have_rows('modules') ): $counter = 0; while ( have_rows('modules') ) : the_row(); ?> <div class="col span_4_of_12 <?php if($counter == 0) { ?>firs ...
I have a service that generates XML files every 10 seconds with server information. I am seeking a solution to showcase this data on a webpage. After researching online, it appears that utilizing AJAX would be beneficial as it permits the loading of dynam ...
Here is the snippet of HTML code: <header> <nav> <a href="#" id="menu-icon"></a> <ul> <li><a href="#"">Home</a></li> <li><a href="#">About</a></li> & ...
I have come across multiple sources recommending the use of aws-amplify-react, but in the documentation for getting started with React, I found a different package @aws-amplify/ui-react that utilizes the module withAuthentication (which is also present in ...
The issue I am encountering is clearly depicted in the simplified code snippet below. During the execution of the TestArrays function, the goal is to write a single item to each location in the multidimensional array. However, upon examining the layers in ...
I'm currently facing an issue where I can't seem to maintain a constant value for the isAuthenticated variable between server-side and client-side in next.js. In my setup, I am using a custom app.js file to wrap the app with Apollo Provider. The ...
I am facing an issue with the code below: <select id="basicInput" ng-model="MyCtrl.value"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3"& ...
I am facing an issue with the expansion panels in my sidenav. I have successfully been able to track and set their open state as they are opened and closed. However, when a list item within the panel is clicked and redirects to another route, the panel c ...
I have a PHP script that retrieves data from a database: <?php while($trackResultRow = mysqli_fetch_assoc($trackResult)){?> <a onclick="remove()"><span class="glyphicon glyphicon-thumbs-down pull-right"></span></a> < ...
My HTML code looks like this: <input id="SLOCriteriaOtherText" name="SLOCriteriaOtherText" style="width: 100%;" type="text" data-role="autocomplete" placeholder="Enter name for 'other' metric..." class="k-input" autocomplete="off" role="textb ...
I have a set of objects that require filtering. If the object has an active status of true, it should always be included in the filtered result regardless of other conditions. If there is text entered for search, then the remaining items should be filter ...