2010-12-31 2 views
13

Я пытаюсь создать простой механизм оповещения с помощью jQuery Tools - в ответ на немного кода Javascript появится надпись с сообщением и кнопка OK, при нажатии на нее оверлей уходит. Тривиальный, или это должно быть. Я рабски следил за http://flowplayer.org/tools/demos/overlay/trigger.html, и у меня есть что-то, что отлично срабатывает при первом вызове, но только в это время. Если я повторяю действие JS, которое должно выставлять наложение, это не так.jQuery Tools alert работает один раз (но только один раз)

Мой контент/DIV:

<div class='modal' id='the_alert'> 
    <div id='modal_content' class='modal_content'> 
    <h2>hi there</h2> 
    this is the body 
    <p> 
    <button class='close'>OK</button> 
    </p> 
    </div> 
    <div id='modal_background' class='modal_background'><img src='/images/overlay/f9f9f9-180.png' class='stretch' alt='' /></div> 
</div> 

и Javascript:

function showOverlayDialog() { 
$('#the_alert').overlay({ 
    mask: {color: '#cccccc', loadSpeed: 200, opacity: 0.9}, 
    closeOnClick: false, 
    load: true 
}); 
} 

Как я сказал: Когда showOverlayDialog() вызывается в первый раз, наложение появляется так же, как и должно быть, и исчезает при нажатии кнопки «ОК». Но если я заставляю showOverlayDialog() запускаться снова, не перезагружая страницу, ничего не происходит. Если я перезагружу страницу, то образец повторяется - первый вызов вызывает оверлей, а второй - нет.

Я, очевидно, что-то пропустил - любой совет там? Благодаря!

+0

Что вы прикрепляете к своей кнопке 'Close'? С первого взгляда кажется, что вы можете манипулировать HTML, чтобы скрыть наложение, а не использовать JQuery, поэтому JQuery считает, что наложение уже открыто и не будет отображать его повторно. Это может быть неправильный анализ, но если вы можете опубликовать полный источник, мы сможем помочь дальше – Basic

+0

Я ничего не прикрепляю к кнопке Закрыть. Мое (ограниченное) понимание инструментов jQuery заключается в том, что назначение кнопки OK классу = закрыть делает что-то автоматически в коде jQuery Tools, что приводит к тому, что наложение удаляется. В любом случае у меня нет каких-либо других обработчиков jQuery или javascript, которые делают вещи в структуре. –

ответ

20

Определить диалог и установить load ложь (отключить автоматическую загрузку диалога):

$('#the_alert').overlay({ 
    mask: { 
     color: '#cccccc', 
     loadSpeed: 200, 
     opacity: 0.9 
    }, 
    closeOnClick: false, 
    load: false 
}); 

Тогда в обработчике, который показывает диалог, вызовите loadapi method:

$("#show").click(function() { 
    $("#the_alert").data("overlay").load(); 
}); 

(Назначает событие щелчка элементу с идентификатором show, который показывает наложение)

Работающий exa mple здесь: http://jsfiddle.net/andrewwhitaker/Vqqe6/

Я не верю, что вы можете определить более одного наложения на определенный элемент, что вызывало вашу проблему.

+0

Получил это - большое спасибо! Мне пришлось немного подправить его, чтобы он вписывался в то, что происходит на странице, но все в порядке. Звучит как ответ на меня; благодаря! –

+1

Почти 1 год спустя, и этот ответ по-прежнему полезен кому-то. Спасибо, @ Андрю. +1 – rgin

+0

Я должен был установить true для загрузки –