Встроенная проблема Thickbox
Я пытаюсь создать модальное окно со скрытым содержимым, используя Thickbox. Он прекрасно открывает окно, но не уверен, почему он не показывает содержимое внутри id="hiddencontent".
я следую как предложено в примерах для встроенных http://jquery.com/demo/thickbox/-thanks
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenContent" class="thickbox">Show Content</a>
<div id="hiddenContent" style="display: none">inline content comes here</div>
</body>
</html>
4 ответа
Кажется, у вас нет файла css, вы можете скопировать css Thickbox на http://jquery.com/demo/thickbox/ на свою страницу (или сохранить как файл style.css).
- edit - Да, извините, не заметил, что css уже загружен:(
Кстати, только что нашел решение, попробуйте добавить тег p внутри вашего элемента hiddenContent:
<div id="hiddenContent" style="display: none"><p>inline content comes here</p></div>
Надеюсь помогает;)
Там нет необходимости редактировать .js
файл, решение довольно простое.
Может быть, чуть позже:), но я преодолел проблему, только изменив ?
обуглить #TB_inline?
от &
Вопрос на внутреннем parseQuery
функция tickbox, которая анализирует совпадающие пары, но срабатывает, когда запрос имеет двойной ?
как в случае.
ОБНОВЛЕНИЕ: в некоторых случаях <p>
исправить тоже нужно;)
Надеюсь, поможет.
Это ошибка в Thickbox. Вот как вы можете это исправить:
Внутри Thickbox.js
в строке 221 или около нее вы должны увидеть следующую строку кода:
$("#TB_ajaxContent").append($('#'+params['inlineId']).children());
измените это на это:
$("#TB_ajaxContent").html($('#'+params['inlineId']).html())
и затем на строке 223 или около нее вы увидите эту строку:
$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
отключите строку, добавив две косые черты перед этим следующим образом:
//$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
Объяснение:
Когда Thickbox копирует содержимое из скрытого элемента div в контейнер Thickbox, он копирует все элементы.children(). Если внутри вашего скрытого элемента div есть только текст, ДЕТЕЙ НЕТ, потому что текст сам по себе не является дочерним элементом. Вот почему оборачивать ваш контент в <p>
тег будет работать, потому что теперь есть ребенок (<p>
тег).
Так что если вы хотите, чтобы текст только в вашем скрытом div, используя .html()
вместо этого будет захватывать все в вашем скрытом div. Отключение второй строки предотвращает попытку копии скопировать содержимое обратно в скрытый элемент div при его закрытии, что приведет к дублированию содержимого скрытых элементов в дочерних тегах.
Функция tb_position() должна быть обновлена.
это условие
if (!(jQuery.browser.msie && jQuery.browser.version < 7))
является причиной ошибки.
jQuery больше не поддерживает jQuery.browser. Для обнаружения IE6 в этом случае измените вышеуказанное условие на это
if (!(/\bMSIE 6/.test(navigator.userAgent)))