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

slateclub

Постоялец
Регистрация
5 Ноя 2008
Сообщения
71
Реакции
4
Всем привет!

Исследую 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:
HTML:
<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');
Среди этих методов есть то что нужно: установка заголовка и содержимого на лету. Но как грамотно это использовать? В моих кривых руках элементарно не работает даже такая конструкция:
Код:
<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)

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

Изначально думал сделать как-то так, но из-за проблемы выше ничего не выходит:
Код:
<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>
Если есть кто расскажет мне где я туплю, буду благодарен. И вообще может есть более грамотное решение этой задачи?
 
Но если вставить в data-url ссылку на изображение, то в модальном окне открывается исходный код картинки : )
Kube не создает фрейм, а грузит странички на аяксе поэтому так получается. Для картинок есть FancyBox и много чего еще.
Среди этих методов есть то что нужно: установка заголовка и содержимого на лету. Но как грамотно это использовать? В моих кривых руках элементарно не работает даже такая конструкция:
С методами чё-то намудрили они.
Так будет работать:
Код:
$(document).ready(function() {
    $('#my-modal-1').on('opened.modal', function() {
      this.$header.html('my header');
      this.$body.html('my content')
    }); 
});
 
Для картинок есть FancyBox и много чего еще.
Ну если есть встроенные модальные окна, то лучше их и использовать, без подключения сторонних библиотек. Сейчас смотришь на готовые макеты (шаблоны) - так там подключают 3-5 css файлов + мин. 5 js библиотек : ) и получается что 60% css и js не используется, но загружается.

Так будет работать
А можно как-то использовать метод установки ширины окна в Вашем рабочем примере?:ah:
$('#my-modal-1').modal('setWidth', '800px');
 
Ну если есть встроенные модальные окна, то лучше их и использовать, без подключения сторонних библиотек. Сейчас смотришь на готовые макеты (шаблоны) - так там подключают 3-5 css файлов + мин. 5 js библиотек : ) и получается что 60% css и js не используется, но загружается.
Так а проблема в чем? Картинку в модальное окно добавить?
HTML:
$('#my-modal-1').find('.modal-body').html('<img src="http://www.gstatic.com/webp/gallery/1.jpg">');
А можно как-то использовать метод установки ширины окна в Вашем рабочем примере?:ah:
$('#my-modal-1').modal('setWidth', '800px');
Код:
    $('#my-modal-1').on('opened.modal', function() {
      this.opts.width = '200px';
      this.resize();
    });
 
Назад
Сверху