Popcorn.js и jQuery - PullRequest
Новая
       40

Popcorn.js и jQuery

0 голосов
/ 15 ноября 2011

Есть ли способ нацеливаться на элементы Popcorn.js, используя jQuery. Пример: у меня есть это ниже как метод с div в текстовой области. Я добавляю интервал закрытия, чтобы попытаться закрыть родительский div, если человек не хочет ждать 8 секунд, пока элемент не закроется. Это в моем script.js 

example.popupFootnote({ "id": "footnote",
    "start": 2,
    "end": 10,
    "target": "footnotes",
    "title": "Tear Gas",
    "text": '<div id="exampleBox"><span style="float:right; margin-right:10px">Close Window</span><a href="http://en.wikipedia.org/wiki/Tear_gas">Tear gas</a>, formally known as a lachrymatory agent or lachrymator (from lacrima meaning "a tear" in Latin), is a non-lethal chemical compound that stimulates the corneal nerves in the eyes to cause tearing, pain, and even blindness. Common lachrymators include OC, CS, CR, CN, nonivamide, bromoacetone, phenacyl bromide, xylyl bromide and syn-propanethial-S-oxide (from onions). Lacrymators often share the structural element Z=C-C-X, where Z indicates carbon or oxygen, and X indicates bromide or chloride.</div>',
    top: '10%',
    left: '70%'
});`

Так что я не хочу, чтобы щелкнул элемент closeWindow, а затем закрылся родительский элемент.

это в моем index.html ниже моего script.js в HTML между тегами script. 

$(document).ready(function () {

    $('#closeWindow').click(function () {
        $(this).parent().parent().hide();
    });

});

Элементы HTML расположены следующим образом: 

<div id="movieHolder">

<div id="video" style="width: 750px; height: 422px;" ></div>

    <div id="overlayDiv"></div>

    <div id="overlayDiv-Map"></div>

    <div id="footnotes"></div>

</div>

1 Ответ

2 голосов
/ 15 ноября 2011

Для этого вам нужно использовать делегирование событий или новый jQuery Live метод обработчика событий, вот пример: http://jsfiddle.net/bcmoney/PTJ4w/ (очистка до 25 секунд для всплывающей сноски попкорна)

Вы были довольно близки, но на самом деле забыли поставить: 

<span id="closeWindow" style="float:right; margin-right:10px">Close Window</span>

Также, возможно, вы захотите переместить встроенный CSS во внешнюю таблицу стилей или хотя бы в заголовок, но я уверен, что вы это знаете.

Наконец, jQuery будет изменен на следующее: 

  $(document).ready(function () {
      $('#closeWindow').live("click", function () {
          $(this).parent().parent().hide();
      });
  });
...