Home Web Front-end JS Tutorial jQuery popup layer is always vertically centered relative to the screen or current window_jquery

jQuery popup layer is always vertically centered relative to the screen or current window_jquery

May 16, 2016 pm 05:38 PM
Center vertically Screen Pop-up layer

The pop-up layer is always something that the front-end must deal with. Under normal circumstances, if the pop-up layer has a fixed height and width, it can be done with a style. However, if there is no fixed height or fixed width or fixed height and width, we You need to use JS to process it to dynamically obtain the height or width of the current window; today we have done two situations, one is relative to the screen form, and the other is relative to the current window. Look at the code, it may be useful to you:

Copy code The code is as follows:








//Center the browser window vertically

// The current window is vertically centered







I am The current window, I am the current window, I am the current window, I am the current window, I am the current window, I am the current window
I am the current window, I am the current window, I am the current windowI am the current window, I am the current window, I am the current window
I am the current window, I am the current window, I It is the current window

I am the current window, I am the current window, I am the current window, I am the current window
I am pop-up window 1111
I am pop-up window 1111
I am pop-up window 1111
I am pop-up window 1111
I am pop-up window 1111
I am pop-up window 1111
I am pop-up window 1111

I am pop-up window 2222
I am pop-up window 2222
I am Pop-up window 2222
I am pop-up window 2222
I am pop-up window 2222



< /html>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

iPhone screenshots not working: How to fix it iPhone screenshots not working: How to fix it May 03, 2024 pm 09:16 PM

Screenshot feature not working on your iPhone? Taking a screenshot is very easy as you just need to hold down the Volume Up button and the Power button at the same time to grab your phone screen. However, there are other ways to capture frames on the device. Fix 1 – Using Assistive Touch Take a screenshot using the Assistive Touch feature. Step 1 – Go to your phone settings. Step 2 – Next, tap to open Accessibility settings. Step 3 – Open Touch settings. Step 4 – Next, open the Assistive Touch settings. Step 5 – Turn on Assistive Touch on your phone. Step 6 – Open “Customize Top Menu” to access it. Step 7 – Now you just need to link any of these functions to your screen capture. So click on the first

How to Undo Delete from Home Screen in iPhone How to Undo Delete from Home Screen in iPhone Apr 17, 2024 pm 07:37 PM

Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram

6000 mAh silicon negative battery! Xiaomi 15Pro upgrade leaked again 6000 mAh silicon negative battery! Xiaomi 15Pro upgrade leaked again Jul 24, 2024 pm 12:45 PM

According to news on July 23, blogger Digital Chat Station broke the news that the battery capacity of Xiaomi 15 Pro has been increased to 6000mAh and supports 90W wired flash charging. This will be the Pro model with the largest battery in Xiaomi’s digital series. Digital Chat Station previously revealed that the battery of Xiaomi 15Pro has ultra-high energy density and the silicon content is much higher than that of competing products. After silicon-based batteries are tested on a large scale in 2023, second-generation silicon anode batteries have been identified as the future development direction of the industry. This year will usher in the peak of direct competition. 1. The theoretical gram capacity of silicon can reach 4200mAh/g, which is more than 10 times the gram capacity of graphite (the theoretical gram capacity of graphite is 372mAh/g). For the negative electrode, the capacity when the lithium ion insertion amount reaches the maximum is the theoretical gram capacity, which means that under the same weight

Screen recording goes black: here's the fix Screen recording goes black: here's the fix May 03, 2024 pm 09:13 PM

Are you trying to record something on your phone screen and it's going black? Typically, you can initiate screen recording from Control Center. In some cases, you cannot record items on the screen. We have mentioned all the scenarios along with the list of possible solutions that can help you record your screen properly. Reasons why screen recording goes black – If you try to record any DRM (Digital Rights Management) protected content while it’s playing on your iPhone screen, you won’t get anything. The output will be a pitch black screen. All leading OTT platforms like Netflix, Disney+, Hulu, and Peacock have this DRM that blocks any screen recording functionality. 2. Several websites prohibit the use of screen capture

How to center the text box in html How to center the text box in html Apr 22, 2024 am 10:33 AM

There are many ways to center the HTML text box: text input box: use the CSS code input[type="text"] { text-align: center; } text area: use the CSS code textarea { text-align: center; } horizontal centering: Use the text-align: center style on the text box parent element to center it vertically: use the vertical-align attribute input[type="text"] { vertical-align: middle; }Flexbox: use display:

How to center ul content in css How to center ul content in css Apr 26, 2024 pm 12:24 PM

Center UL content in CSS: Use the text-align property: Set the alignment of text, including the content of list items. Use the margin attribute: Set the left and right margins of the element, and use margin: auto to achieve horizontal centering. Use the display attribute: Set the element to inline-block, then center it vertically using text-align: center. Use flexbox properties: Horizontal and vertical centering through justify-content: center and align-items: center.

Honor X60i mobile phone will be launched tomorrow: visual quadrilateral OLED direct screen Honor X60i mobile phone will be launched tomorrow: visual quadrilateral OLED direct screen Jul 25, 2024 pm 01:54 PM

According to news on July 25, the Honor X60i mobile phone will start pre-sale at 10:08 tomorrow (July 26). The mobile phone adopts a lightweight design, weighs about 172g, and has a thickness of about 7.18mm. Honor X60i adopts a straight screen design with a hole in the center and almost unbounded ultra-narrow borders on all four sides, which greatly broadens the field of view. The rear camera module is presented in an elegant vertical layout, supplemented by a flash on the right side, which not only highlights the sense of technology but also the beauty of simplicity. The overall design inspiration seems to echo the Huawei Pura70 series, but without losing its own characteristics. In terms of color selection, Honor X60i has carefully prepared four fashionable colors: Magic Night, Black Clouds, Water Blue, Moon Shadow, White Coral and Purple to meet the personalized aesthetic needs of different people. The hardware configuration should not be underestimated either. Honor X60

How to center the frame in html How to center the frame in html Apr 22, 2024 am 10:45 AM

There are four ways to center the HTML frame: margin: 0 auto;: Center the frame horizontally. text-align: center;: Center the frame content horizontally. display: flex; align-items: center;: Center the frame vertically. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);: Uses CSS transforms to position the frame in the center of the fixed-size frame's container.

See all articles