嵌入式对象后面的jquery组合框（仅IE） [英] jquery combobox behind embedded object (IE only)

问题描述

在Internet Explorer中，我有一个jquery组合框，它在嵌入对象（例如pdf文档）后面打开。如何确保组合框始终在嵌入对象的前面？

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?

请参阅这个小提示为例： http://jsfiddle.net/RDd3A/258/ （包含我尝试解决问题的更新版）

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：

Javascript:

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

（我已删除所有css）

(I've stripped all css)

我已经尝试过以下操作：

I've already tried the following:

• 使用wmode =transparant作为属性


• 在网址中使用？wmode = transparant


• 使用iframe


• 使用z-index

• 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?

推荐答案

这是一个已知的 IE 问题，只有我知道是已经提到的@Gyum Fox - 另一个面具 iframe 。但是，您不必在元素之间放置iframe - 您可以将绝对定位在 100％中的iframe > height 和 width 。
要放置在元素内部的iframe的CSS：

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;
} 

jQuery 所以我们需要处理一些事件来插入掩码。这个简单的代码将掩码添加到页面上的所有菜单。不是一个完整的解决方案，但显示的方法：

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>" ); 
});

理想情况下，我们需要更新相应的菜单，但是我需要深入了解jQuery的源代码，将尝试稍后处理。

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 带完整示例

这篇关于嵌入式对象后面的jquery组合框（仅IE）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！