How to solve the problem of div covered by object?

I recently worked on a web project. Because there is an plug-in, the pop-up dialog box will be covered by it. I made an tag, and when the box popped up, the and put a dialog box on the iframe. This is the solution to this problem. I finally solved this problem, and I will share my ideas with you for your reference.

(1) First, let me introduce the object tag to you: W3school has explained Definition and usage

Define an embedded object. Please use this element to add multimedia to your XHTML pages. This element allows you to specify data and parameters for objects inserted into an HTML document, as well as code that can be used to display and manipulate the data.

tag is used to contain objects such as images, audio, video, Java applets, ActiveX, PDF, and Flash.

Object was originally intended to replace img and applet elements. However, this did not happen due to bugs and lack of browser support.

The browser's object support depends on the object type. Unfortunately, major browsers all use different code to load the same object types.

Fortunately, object object provides a solution. If the object element is not shown, the code between and is executed. This way we can nest multiple object elements (one for each browser).

In general, the object tag is used to embed multimedia.

(2) Briefly introduce the important attributes of several object tags: classid - associate an application and the unique id of the application that executes embedded content in the Windows system ( This id cannot be changed, otherwise the program will cause an exception),

For example, clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 -- Flash

data -- specifies the URL of the resource used by the object.

(3) Problem with object tag coverage on IE After querying related resources, we found that is a windowed element in IE, that is, a window element. These elements will always be rendered. Above non-window elements, and iframe is above object by default, the only solution is to use iframe as an intermediate, that is, use iframe to cover object, and then use div to cover iframe.

我是对话框

Note:

1. The div must have a specific z-index and be greater than the z-index of the iframe, it cannot be auto or empty;

2. The z-index of the iframe must be negative (it has always been set to a positive value before, although it is smaller than the z-index of the div, but it cannot be covered by the div), Otherwise, the div cannot cover the iframe;

3. The top and left of the iframe are 0, and the width and height of the iframe are equal to the width and height of the div;

4. Pay attention to setting the transparency of the iframe to 0.

5. If there are multiple pop-up boxes on the page, you can use js to dynamically add the iframe.