<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>В лабиринте извилин &#187; simplemodal</title>
	<atom:link href="http://www.charnad.com/blog/tag/simplemodal/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.charnad.com</link>
	<description>Блог-центр им. CharnaD</description>
	<lastBuildDate>Wed, 18 Jan 2012 14:52:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Обзор SimpleModal 1.2.2</title>
		<link>http://www.charnad.com/blog/obzor-simplemodal-122/</link>
		<comments>http://www.charnad.com/blog/obzor-simplemodal-122/#comments</comments>
		<pubDate>Sat, 20 Dec 2008 17:47:42 +0000</pubDate>
		<dc:creator>CharnaD</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[simplemodal]]></category>
		<category><![CDATA[плагин]]></category>

		<guid isPermaLink="false">http://www.charnad.com/?p=258</guid>
		<description><![CDATA[Ранее я уже писал о хорошем и простом плагине для создания модальных окошек на jQuery. Эта запись стала довольно популярной и многие люди находят ее в поисковиках. С тех пор вышла уже новая версия jQuery SimpleModal 1.2.2. Я списывался с автором Эриком Мартином и он попросил меня проверить, все ли исправлено. Давайте этим и займемся. [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-259" title="modal_logo" src="http://www.charnad.com/blog/wp-content/uploads/pictures/simplemodal/modal_logo.png" alt="modal_logo"/>Ранее я уже писал о хорошем и простом плагине для создания <a href="http://www.charnad.com/blog/prostoe-modalnoe-okoshko-na-jquery/">модальных окошек на jQuery</a>. Эта запись стала довольно популярной и многие люди находят ее в поисковиках. С тех пор вышла уже новая версия jQuery SimpleModal 1.2.2. Я списывался с автором Эриком Мартином и он попросил меня проверить, все ли исправлено. Давайте этим и займемся.</p>
<p><span id="more-258"></span></p>
<h4>Fail #1</h4>
<p>Первое, что мы видим - отсутствие обратной совместимости =(.  То есть, если в старые проекты мы скопируем новую библиотеку, то начнутся проблемы. Во-первых мы не увидим наши стили. Эрик переименовал дефолтные id у элементов. Теперь id оверлея у нас 'simplemodal-overlay', id контейнера - 'simplemodal-container', а кнопки 'simplemodal-close'. С одной стороны хорошо, приводится в порядок список id, не будет путаницы с другими плагинами для модальных окон, с другой сейчас начинаются проблемы у тех, кто не разобрался как обновить старые скрипты. На сайте, автор приводит способ, как обеспечить совместимость со старыми css:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">$<span style="color: #339933;">.</span>extend<span style="color: #009900;">&#40;</span>$<span style="color: #339933;">.</span>modal<span style="color: #339933;">.</span>defaults<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
  closeClass<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;modalClose&quot;</span><span style="color: #339933;">,</span>
  overlayId<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;modalOverlay&quot;</span><span style="color: #339933;">,</span>
  containerId<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;modalContainer&quot;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Ладно, будем считать разобрались, настроили стили. Запускаем самый простенький тест, взятый из моего прошлого поста про SimpleModal и...</p>
<h4>Fail #2</h4>
<p><a href="http://www.charnad.com/blog/wp-content/uploads/pictures/simplemodal/fail2.png"><img align="left" title="fail2" src="http://www.charnad.com/blog/wp-content/uploads/pictures/simplemodal/fail2_small.png" alt="fail2"/></a> Бум! Нажал на кнопочку ОК и получил дырку в оверлее. Тут надо заметить, что я убрал вспомогательный &lt;div>, который использовал в первый раз. По-видимому без него все-таки не обойтись. В итоге &lt;div> вернул, дырок больше не получаю. Надо заметить, что подобным страдает только Опера (у меня 9.63). Firefox 3, Chrome 1.0.154 и IE7 показали себя с лучшей стороны. Насколько я понял, автор пытался решить эту проблему для Оперы, но по-видимому в 9.63 что-то изменилось и его старания оказались напрасны.</p>
<h4 style="color:green">Success #1</h4>
<p>А вот и первая удача в новой версии. Теперь нам не надо приклеивать плагин Dimensions. Окно позиционируется по центру совершенно самостоятельно. Это очень радует, я пробовал играть с размерами окна и оно всегда было по центру. Одно только замечание. Нельзя давать модальному окну быть больше, чем размер окна браузера. Или хотя бы кнопку для закрытия не уносить. А то сделал я окно высотой в 1000 пикселей, а экран на ноутбуке у меня 800 пикселей высотой. Вот вам и задача, как закрыть модальное окно? В опере я спасаюсь табом, чтобы перейти на кнопку OK, которая присутствует в моих диалоговых окнах и проблел или enter, чтобы закрыть. Не каждый догадается на самом деле.</p>
<h4>Итого что мы имеем</h4>
<p>Помимо всего вышеуказанного, в версии 1.2.2 есть еще изменения(<noindex><a href="http://www.ericmmartin.com/projects/simplemodal/#changes" rel="nofollow"></noindex>ченджлог</a>). Их я проверить не могу. О результатах тестирования Эрику написал, надеюсь он сможет решить проблему с Оперой. Позже я возможно напишу апдейт для своих диалоговых окошек. А здесь все.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.charnad.com/blog/obzor-simplemodal-122/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

