leanModal.js - закрыть модальный на X нажмите

Question

Нужна помощь в этом вопросе:

https://github.com/FinelySliced/leanModal.js/issues/4

Как вы, ребята, можете помочь?

-R

Answer 1

Вы должны изменить источник leanModal.js и добавить <img> с некоторыми стилями и обработчиком click(), вызывающим close_modal().

Код:

$("<img />").css({
  // styling for the img
  'position': 'fixed', 'top':  o.top + 'px', 'left': '50%'
}).click(function() {
  // onclick behaviour - just close it
  close_modal(modal_id); 
  // icon URL   vvvvvvvvvvvvvvvvvvvvv
}).attr('src', 'http://bit.ly/ttN6Qs').appendTo($(modal_id));

См. Рабочий код ЗДЕСЬ .

Стилизация и размещение значков очень примитивны, но вы можете изменить их так, как вам нравится. Это только демонстрация:).

Answer 2

У меня фактически была та же проблема, и я решил ее, имитируя щелчок на оверлее.Например, можно использовать любую ссылку или изображение, и вы просто добавляете событие onclick:

<a href="javascript:void(0);" onclick="$('#lean_overlay').click();">Close</a>

или

<img src="" onclick="$('#lean_overlay').click();" />

Кажется, работает хорошо: D

Answer 3

Вот что я сделал для элемента div:

$("<div >").css({
                    'position': 'absolute',
                    //'top': o.top + 'px',
                    'top': '-20px',
                    'right': '20px'
                }).click(function() {
                    // onclick behaviour - just close it
                    close_modal(modal_id);
                }).attr('class', 'cross-close').appendTo($(modal_id));

                $(modal_id).fadeTo(200, 1);

                e.preventDefault();

            });

        });

И у меня был этот CSS ...

.cross-close:before {
content: "x";
}