Kube Framework - модальные окна

[slateclub]

Всем привет!

Исследую Kube CSS & JS Framework от imperavi и столкнулся с проблемой в работе с модальными окнами. Проблема из-за незнания JS.

Спойлер: Вот базовая html разметка этих окон (всё просто, всё работает):

<button data-component="modal" data-target="#my-modal-1">Open</button>

<div id="my-modal-1" class="modal-box hide">
    <div class="modal">
        <span class="close"></span>
        <div class="modal-header">Modal Header</div>
        <div class="modal-body">Modal Body</div>
    </div>
</div>

Проблема появляется, если нужно открывать изображения. Естественно, что создавать скрытые div'ы под каждую картинку - это не правильно. Есть возможность поместить в div с классом modal-body содержимое через url:

<button data-component="modal" data-target="#ui-modal" data-url="modal.html">Open</button>

Но если вставить в data-url ссылку на изображение, то в модальном окне открывается исходный код картинки : )

В документации (Для просмотра ссылки Войди или Зарегистрируйся) описаны возможности работы с всплывающими окнами (API) :

Спойлер: цитата из документации

$('#my-modal').on('open.modal', function() {
    // do something...
});

$('#my-modal').on('opened.modal', function() {
    // do something...
});

$('#my-modal').on('close.modal', function() {
    // do something...
});

$('#my-modal').on('closed.modal', function() {
    // do something...
});

$('#my-modal').modal('setHeader', 'My Header');

$('#my-modal').modal('setContent', 'My Content');

Среди этих методов есть то что нужно: установка заголовка и содержимого на лету. Но как грамотно это использовать? В моих кривых руках элементарно не работает даже такая конструкция:

Спойлер: мои кривые строки ч.1

<script type="text/javascript">
$(document).ready(function() {
    $('#my-modal-1').on('open.modal', function()
    {
        $('#my-modal-1').modal('setHeader', 'My Header');
        $('#my-modal-1').modal('setContent', 'My Content');
    });
});
</script>

Ругается в консоли:
Uncaught TypeError: Cannot read property 'html' of undefined(localhost/kube.min.js)
at t.Modal.<anonymous> (localhost/modal.html)

Понятно, что проблема в написанных МНОЮ строчках : )

Изначально думал сделать как-то так, но из-за проблемы выше ничего не выходит:

Спойлер: задумка (мои кривые строки ч.2)

<img src="img/1.png" title="Картинка 1" onclick="return showImg('img/1.png', 'Картинка 1')">
<img src="img/2.png" title="Картинка 2" onclick="return showImg('img/2.png', 'Картинка 2')">
<img src="img/3.png" title="Картинка 3" onclick="return showImg('img/3.png', 'Картинка 3')">

<script>
function showImg(img, title) {
    $('#my-modal-1').on('open.modal', function()
    {
        $('#my-modal-1').modal('setHeader', title);
        $('#my-modal-1').modal('setContent', '<img src="' + img + '">');
    });
}
</script>

Если есть кто расскажет мне где я туплю, буду благодарен. И вообще может есть более грамотное решение этой задачи?

 

[Absolute]

Но если вставить в data-url ссылку на изображение, то в модальном окне открывается исходный код картинки : )

Kube не создает фрейм, а грузит странички на аяксе поэтому так получается. Для картинок есть FancyBox и много чего еще.

Среди этих методов есть то что нужно: установка заголовка и содержимого на лету. Но как грамотно это использовать? В моих кривых руках элементарно не работает даже такая конструкция:

С методами чё-то намудрили они.
Так будет работать:

$(document).ready(function() {
    $('#my-modal-1').on('opened.modal', function() {
      this.$header.html('my header');
      this.$body.html('my content')
    }); 
});

 

[slateclub]

Для картинок есть FancyBox и много чего еще.

Ну если есть встроенные модальные окна, то лучше их и использовать, без подключения сторонних библиотек. Сейчас смотришь на готовые макеты (шаблоны) - так там подключают 3-5 css файлов + мин. 5 js библиотек : ) и получается что 60% css и js не используется, но загружается.

Так будет работать

А можно как-то использовать метод установки ширины окна в Вашем рабочем примере?
$('#my-modal-1').modal('setWidth', '800px');

 

[Absolute]

Ну если есть встроенные модальные окна, то лучше их и использовать, без подключения сторонних библиотек. Сейчас смотришь на готовые макеты (шаблоны) - так там подключают 3-5 css файлов + мин. 5 js библиотек : ) и получается что 60% css и js не используется, но загружается.

Так а проблема в чем? Картинку в модальное окно добавить?

$('#my-modal-1').find('.modal-body').html('<img src="http://www.gstatic.com/webp/gallery/1.jpg">');

А можно как-то использовать метод установки ширины окна в Вашем рабочем примере?
$('#my-modal-1').modal('setWidth', '800px');

    $('#my-modal-1').on('opened.modal', function() {
      this.opts.width = '200px';
      this.resize();
    });