Я работаю на сайте , где есть всплывающие окна в заголовке, сгенерированном 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;
}
По неизвестным причинам IE совершенно счастлив, если я оберну элементы ниже элемента классом .trigger вUL.Это был способ, которым я изначально настроил 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>
Любая помощь будет принята с благодарностью.Я в тупике.