Question

I want the applet not floating in html.

When I open a jQuery modal window, the window is behind the applet component.

Now, how can I make the applet same layer as regular html text, inputs, buttons etc…so that the jQuery modal window is on top of the applet?

I already tried: z-index: -1 and z-index: -99999 but it doesn’t work.

Browser use: IE7 and IE9

Answer 1

The simplest way is to use an iframe to float content above an applet.

Im in the same boat, where we have to use a java applet to communicate with a mainframe system. We need to display dynamic content in a popover and the only way I have been able to accomplish that is with using an iframe.

CSS:

.popover {

    position: absolute;
    top: 65px;
    left: 10px;
    /*z-index: 999;*/

    border: none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 10px 15px 0px rgba(140, 140, 140, .9);
}

HTML:

<iframe class="popover"></iframe>

Note: border-radius and box-shadow will not work well in Firefox or chrome, when floated over the java applet. Transparency is also an issue, however Chrome seems to handle all three better than Firefox.