嵌入对象后面的 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

不幸的是，这无济于事，组合框仍然在嵌入文档的后面.有人吗?

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

推荐答案

这是一个已知的 IE 问题，我前段时间做了一个调查，我知道的唯一方法@Gyum 已经提到了Fox - 另一个掩码"iframe.但是，您不必在之间"放置 iframe元素 - 您可以将绝对定位的 iframe 放置在具有 100% 高度 和 宽度 的相应元素内.要放置在元素内的 iframe 的 CSS:

It is a known IE issue, I did an investigation some time 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屋！