Tips for displaying a centered popup on the screen when zoomed in on mobile devices

Hey there, I'm currently facing an issue with popups on my Blazor WebAssembly application when accessed through mobile phones.

On my website, users need to zoom in on the mobile version to interact with certain objects that trigger a popup to appear. The problem is, these popups always show up at the top left corner of the original viewport, which becomes problematic for users who have zoomed in and shifted the viewport. My goal is to make sure that the popup appears at the center of the user's current viewport, regardless of any zooming or shifting they may have done. Does anyone have any suggestions on how to achieve this?

Currently, I am using the following CSS:

.modal {
        bottom: 0;
        left: 0;
        margin: auto;
        max-height: 500px;
        max-width: 600px;
        min-width: 300px;
        position: fixed;
        right: 0;
        top: 0;
    }

Here are some screenshots for reference:

Expected Behavior

Behavior When Moved Away from Initial Viewport or Zoomed In

htmlcssasp.netblazor

Answer №1

The centering effect with the transform property is dependent on the size of the element, ensuring a precise alignment.

.popup {
    margin: auto;
    max-height: 450px;
    max-width: 550px;
    min-width: 250px;
    position: fixed;
    right: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

Experiencing difficulties in applying an image texture to a plane using Three.js CanvasRenderer

I'm currently working on creating a UI inspired by the Halo Reach menus. My plan is to set the webpage background to an image, create a plane in front of it, and use a texture with semi-transparent rectangle shapes as the main background for the UI. I ...

javascripthtmlcsshtml5-canvasthree.js

Generating Iframes Automatically with JavaScript

I am looking for a way to dynamically generate Iframes based on the number of HTML files present in a specific directory. For example, if I have files named 1.html and 2.html located in a subdirectory relative to where main.html is stored, I want the abi ...

javascripthtmliframe

What is the best way to display the panel during a postback?

I have a group with two radio buttons labeled purchase and expenses. When the purchase radio button is clicked, the panelpurchase will be displayed, and similarly, the panelexpense will show for the expenses radio button. Check out the image of the output ...

javascriptc#jqueryhtmlasp.net

Web app that utilizes preventDefault() to act independently - not compatible with image hyperlinks

I am working on a web application that I would like to appear as a standalone once a user has added it to the home screen of their device. I have been testing this functionality on an iPhone 5 and using meta tags to create a web app experience. Additionall ...

javascriptjqueryhtmliphone-standalone-web-app

Using both text and image sprites in a horizontal menu list on a UL element

I am attempting to create a horizontal menu using image sprites and text, but have been unsuccessful so far. Although I have an idea of what I want it to look like, my CSS is not achieving the desired result. This is what my current CSS looks like: < ...

htmlcssmenu

Having trouble loading events on Fullcalendar.io?

Our team is utilizing fullcalendar.io and aiming to retrieve an event from our API controller. The Controller [Route("api/Bookings")] public class BookingApiController { // GET [HttpGet] public string Get() { ...

javascriptasp.netjsonasp.net-web-apifullcalendar

SignalR is experiencing an issue with a protocol error that is related to an unknown

I've been trying to implement the concepts from this article on SignalR and Knockout.js, but I'm encountering some issues. Here is the article I am referencing: http://www.codeproject.com/Articles/322154/ASP-NET-MVC-SIngalR-and-Knockout-based-Re ...

c#jqueryasp.netknockout.jssignalr

Adjust the dimensions of form input fields in Laravel

Can anyone help me figure out why setting the width of an input field in Laravel 5 isn't working as expected? {!! Form::input('text','table_list', null, array('required'=>'required','width' => 1 ...

phphtmllaravel-5

Encountering a problem with displaying error messages in an empty text field

I am facing an issue with displaying error messages when a text field is left blank. I would like a simple message, such as "can't be empty", to appear below the text field in red color when the user clicks the submit button and leaves multiple fields ...

javascriptphphtmlmessagebootstrap-modal

Exploring the world of web development through Asp.net, delving into the visual capabilities

I have a quick question. It's regarding a true/false quiz setup. I have two radio buttons, and when a regular button is clicked, the website should navigate to site A if RadioButton1 is selected, and site B if RadioButton2 is selected. ASPX <p&g ...

asp.netvisual-studiobuttonradio-button

Issues with Django and Bootstrap Dropdown Lists Functionality

I've been working on my Django web application and I'm facing an issue with getting the dropdown list to actually drop down when clicked. <div class="panel panel-default"> <div class="panel-body"> <div class="dropdo ...

pythonhtmldjangotwitter-bootstrappython-3.x

SQL: Transfer the database to ASP.NET platform

Is there a way to export my SQL Server 2008 database as a .mdf file with its logs, so that I can simply drag and drop it into my ASP.NET application's APP_Data folder? I want to avoid referring the web app to the database datasource in SQL Server 2008 ...

asp.netsqlsql-serversql-server-2008-r2

What is the best way to remove a div card along with its content in a React application?

https://i.sstatic.net/IlXwE.gif Encountering an issue similar to the gif image provided. Upon deleting the first card, the content of the subsequent card is also removed. How can this be prevented? state = { data: '', todoCard: [ ...

javascriptcssreactjsfrontendreact-component

divide a lengthy string into several dynamic divisions

I am attempting to divide a lengthy string into multiple dynamic divs once the height of the div reaches a certain limit. Below is the code that I believed would achieve this: $(document).ready(function () { var arr = longishstring.split(' ' ...

javascriptjqueryhtml

Android experiencing issues with dynamically loading Border XML

I am having trouble setting a border dynamically for a RelativeLayout. Oddly enough, when I manually add the border in the activity XML file, it displays perfectly. However, when I try to generate the border dynamically, it doesn't appear. border.xml ...

androidcssxmlandroid-layout

When scrolling, a new page loads seamlessly

Recently, I came across a website that has an interesting feature where new content is loaded automatically while scrolling, seamlessly appending to the existing page. What's more fascinating is that not only does the content change, but the URL also ...

javascripthtmlcssweb-applications

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll

Get rid of excess header space in Bootstrap

There seems to be a persistent gap at the top of my page in my code, possibly set by Bootstrap. I have checked using Firefox's inspector but found nothing. Even adding margin: 0; padding: 0; to the tag hasn't resolved the issue. The #intro div s ...

javascriptjqueryhtmlcsstwitter-bootstrap

JavaScript code is functioning properly on Chrome and Internet Explorer, however, it may not be working on FireFox

Despite searching through the console, I am unable to find a solution to this issue. There are two images in play here - one is supposed to appear at specific coordinates while the other should follow the mouse cursor. However, the image intended to track ...

javascriptcsshtml

When I attempt to export the RadGrid to Excel by clicking the button, there is no response

I am encountering an issue with exporting a simple grid to excel. When I click on the excel button in the command item display, nothing happens. I'm wondering if this process is automated or if I need VB code behind it to trigger the export? Here is ...

asp.netvb.netexceltelerikradgrid