我正在工作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>


任何帮助将不胜感激。我很沮丧

最佳答案

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

10-05 20:27
查看更多