Jquery - всплывающее окно запущено ... как сделать все остальное

Question

Я пытаюсь создать чистое всплывающее окно jquery с различными функциями.Я не хочу использовать плагин (и я хочу научиться LOL).Вот что я хочу.

1. центрируйте его на экране (все готово и работает)
2. закрывайте это всплывающее окно всякий раз, когда пользователь нажимает за его пределами.(Мы должны иметь возможность щелкнуть ВНУТРИ всплывающего окна)
3. Я хочу, чтобы содержание HTML всплывающего окна менялось в зависимости от ссылки, по которой вы щелкнули.(напр., я хочу, чтобы во всплывающем окне был указан список для ссылки 1 и форма для ссылки 2) - (вообще не знаю, как это сделать)

Теперь вот что у меня есть:http://jsfiddle.net/RYwsy/2/

Я провел некоторое исследование, но существует так много разных техник, которые я полностью потерял.И я хочу, чтобы это был самый простой и быстрый способ сделать это с помощью jQuery.

Я все еще ищу и пробую что-то, но мне бы тоже нужна была помощь.

Answer 1

Ого, это было сложнее, чем ожидалось ... Короче говоря, я отредактировал вашу скрипку: Здесь , и теперь она работает.

Редактировать: новая скрипка, которая использует распространение событияболее аккуратно: http://jsfiddle.net/RYwsy/23/

Точка 3 была довольно простой.Если вы хотите, чтобы контент поступал откуда-то на странице, найдите его на основе какого-либо свойства ссылки, на которую вы нажали, или контекста, в котором он находится (например, посмотрите на его братьев и сестер или что-то в этом роде).В моем примере я просто добавил атрибут id к ссылке и использовал его для определения скрытого элемента div, который содержит контент, и вставил его во всплывающее окно.

Точка 2 была более хитрой.Сначала я просто прикрепил обработчик кликов ко всему, кроме всплывающего окна, и спрятал там всплывающее окно.Это не сработало, потому что события щелчка во всплывающем окне распространялись вверх по домену и в конце концов достигли некоторого элемента, скрывшего всплывающее окно.Затем я добавил проверку, щелкаем ли мы по всплывающему окну, и, если это так, остановим распространение там.

Вопрос о том, является ли это самым чистым решением, вероятно, весьма спорен, но он довольно чистый и, если не сказать большехороший пример того, почему вам нужно понимать распространение событий в javascript: -)

Answer 2

Вы можете использовать что-то подобное для загрузки HTML во всплывающем окне -

$('a').click(function(e) {
  e.preventDefault();
  var thisHREF = $(this).attr('href');
  $('popup').load(thisHREF);
});