iFrame is a great way to use it as a popup layer to cover the background

I have been working on a project recently - Budou Collection. In short, it is to collect the pictures you like to the Budou page. Many aspects of iframe are used in this process, which can be summarized as follows:

1. As a pop-up layer to cover the bottom

If you have ever made a black mask covering the entire page, and the user happens to be using IE6, and there happens to be a select element on the page, then you will have a headache (I won’t go into the principles here). We will find that the pop-up DIV cannot cover the select, so it is our iframe's turn to appear. The logic is as follows:

Put an iframe at the same level as the pop-up div
Ensure that the z-index of the iframe is smaller than the z-index of the pop-up div
Add window resize and scroll events to ensure that the iframe can cover the entire page

Part of the code

Copy code

The code is as follows:

var iframe = U.isie6() ? '<iframe style="position:absolute;left:0;top:0;z-index:2000000;filter:Alpha(opacity=0); width:100%;height:' + ds.height + '" frameborder="0"></iframe>' : '';
$container.append(iframe).appendTo($body);

2. Writing cookies across domains

There are two domains, a.com and b.com. Under certain conditions, some of the functions of b will appear on page a. Sometimes when operating page a, you need to do some operations on the cookies of domain b.com to facilitate the user's next visit. We only need to add an iframe (dynamic or fixed) to page a, with the src attribute pointing to a proxy page of b, and perform cookie operations on this page.

<<: Detailed explanation of several API examples commonly used in advanced javascript front-end development

>>: The English reading of various special symbols on the keyboard (knowledge popularization)

iFrame is a great way to use it as a popup layer to cover the background

Vue custom bullet box effect (confirmation box, prompt box)

Docker overlay realizes container intercommunication across hosts

25 Tools to Improve Website Usability and Conversion Rates

Detailed explanation of the front-end method of passing parameters between HTML pages

The best solution for resetting the root password of MySQL 8.0.23

JavaScript implements countdown on front-end web page

Use pure CSS to achieve scroll shadow effect

Detailed steps for using jib for docker deployment in Spring Cloud

Detailed explanation of transaction isolation levels in MySql study notes

Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables

Recommend

Use CSS to prevent Lightbox to realize the display of large image code without refreshing when clicking on small image

Detailed explanation of samba + OPENldap to build a file sharing server

Solution for Nginx installation without generating sbin directory

Sample code for html list box, text field, and file field

Network management and network isolation implementation of Docker containers

SELinux Getting Started

Introduction to document.activeELement focus element in JavaScript

js implementation of verification code case

Tutorial on logging into MySQL after installing Mysql 5.7.17

Html+CSS drawing triangle icon

CSS container background 10 color gradient Demo (linear-gradient())

How to add vector icons to web font files in web page production

Two ways to clear float in HTML

How much data can be stored in a MySQL table?

6 solutions to IDEA's inability to connect to the MySQL database