jquery combobox behind embedded object (IE only)

问题:

In Internet Explorer, I have a jquery combobox which opens behind an embedded object (for example a pdf document). How can I make sure the combobox is always in front of the embedded object?

See this fiddle for an example: http://jsfiddle.net/RDd3A/258/ (updated fiddle containing my attempts to solve it)

HTML:

<select id="combobox">
  <option value="">Select one...</option>
  <option value="23">Really long stuff that might wrap</option>
  <option value="25">Normal Stuff</option>   
</select>
<br/>
<embed src="https://www.xs4all.nl/media/transparantie/Transparantierapport-2012.pdf"/>

Javascript:

$("#combobox").combobox();

(I've stripped all css)

I've already tried the following:

• Use wmode="transparant" as attribute
• Use ?wmode=transparant in the url
• Use an iframe
• Use z-index

Unfortunately, this doesn't help, the combobox is still behind the embedded document. Anyone?

回答1:

It is a known IE issue, I did an investigation some times ago and the only way I know is already mentioned by @Gyum Fox - another 'mask' iframe. However you don't have to put an iframe "between" the elements - you can put absolutely positioned iframe inside corresponding element with 100% height and width. CSS of an iframe to be placed inside of the element:

iframe.ie-fix {
   position: absolute;
   border: none;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: -1;
} 

The problem that jQuery constructs menu content dynamically, so we need to handle some events to insert the mask. This simple code adds mask to all menus on the page. Not a complete solution, however shows the approach:

$('.ui-button').click(function() {
     $('.ui-menu').append("<iframe class='ie-fix' src='about:blank'></iframe>" ); 
});

Ideally we need to update only corresponding menu, butI need to dig deeper into jQuery's sources to accomplish that, will try to address later.

JS Fiddle with complete example

回答2:

This is an IE issue. I had a similar problem using a combobox inside a modal dialog in JQuery UI. The combobox would work fine in Chrome or Firefox. The only way I found to resolve that issue is to place it inside an iframe. I worked for me in the modal dialog.

IE and JQuery seem to work fine together as long as you don't do anything too fancy. I also tried placing a s select box in a modal dialog and it didn't work either. I avoid using two JQuery UI elements when they must be nested.

Since udalmik answered first, you should use his implementation.