Question

我正在工作on a site，Jquery Tools Tooltip（http://flowplayer.org/tools/tooltip/index.html）生成的标题上有弹出窗口。我和他们的问题是双重的：

1）在IE7 / IE8中，弹出窗口在页面加载时可见，导致标题分开并在页面上分散。我写的CSS应该是防止这个（它在FF中）但它不起作用：

#container > section > header .trigger + *{
position:absolute;
left:-9999px;
z-index:1000;
}

由于未知的原因，如果我在UL中用类.trigger包装元素下面的元素，IE非常高兴。这是我最初设置HTML的方式，但我最终选择了Jquery选项卡并从CSS中清除了标题中所有列表的提及，所以我无法弄清楚为什么这样做有效。

2）我的第二个问题是，当提交“写入我们”标题下的弹出窗口中的表单时，标题消失并且内容容器移位。应该发生的是“谢谢”消息应该在联系表单所在的同一个弹出窗口中加载。由于表单是由我正在使用的CMS中的插件生成的，我理想地想解决这个问题不必想办法让JS拦截插件的输出，但如果有必要，我会。

以下是表单的代码：

<form method="post" id="zcrc4246f0a2add167f83d1d4084631a0b4" class="zemContactForm" action="/qp2txp/#zcrc4246f0a2add167f83d1d4084631a0b4">
<div>
<input type="hidden" name="zem_contact_nonce" value="735c856baeffe5da43125cbf5a628084" />
<input type="hidden" name="zem_contact_form_id" value="c4246f0a2add167f83d1d4084631a0b4" />

<label for="Name" class="zemText zemRequired Name">Name</label><input type="text" id="Name" class="zemText zemRequired" name="Name" value="" maxlength="100" />

<label for="Email" class="zemText zemRequired Email">Email</label><input type="text" id="Email" class="zemText zemRequired" name="Email" value="" maxlength="100" />
<label for="Project" class="zemSelect zemRequired Project">Project</label>
<select id="Project" name="Project" class="zemSelect zemRequired">
<option>Branding</option>
<option>Print</option>
<option>Web</option>
<option>Interiors</option>

<option>Other (Please Describe)</option>
</select>
<label for="Message" class="zemTextarea zemRequired Message">Message</label><textarea id="Message" class="zemTextarea zemRequired" name="Message" cols="58" rows="8"></textarea><br>
<input type="submit" class="zemSubmit" name="zem_contact_submit" value="Send" />


</div>
</form>

和Jquery：

<script>
$(document).ready(function() {

$("header .trigger").tooltip({

position: 'bottom center',
offset: [30, -60],
relative: 'true',
delay: '70'

});

$("footer .trigger").tooltip({

position: 'top left',
offset: [-40, 100],
relative: 'true',
delay: '70'

});

});
</script>

非常感谢任何帮助。我很难过。

Answer 1

对于第一个问题，请尝试display:none;而不是left:-9999px;以解决第二个问题，您需要发布代码。

Answer 2

尝试并更改CSS +选择器以应用z-index。 +选择器是IE系列中的错误（如最有用的CSS声明）。

http://www.quirksmode.org/css/contents.html

在网站上呈现jquery工具提示的问题

2 个答案: