Хотите использовать JQuery всплывающее окно, но получить данные со стороны сервера

Question

Когда кто-то нажимает на мою ссылку Google AdWords, как это:

http://www.myshoppingsite.com/product/rubberball.aspx?promo=promo123

Я хочу, чтобы моя страница aspx прочитала параметр "promo", попала в базу данных, чтобы получить некоторые данные, а затем отобразила пользователю красивое всплывающее окно типа jquery поверх страницы продукта. Пользователь может прочитать все о продвижении, затем закрыть это всплывающее окно и перейти на страницу продукта, на которую он хотел перейти.

Я не уверен, как это сделать ... Я читаю параметр и получаю данные со стороны клиента (через веб-сервис или метод страницы), или я получаю данные и вызываю javascript со стороны сервера?

Ранее я создавал всплывающие окна jquery, но данные всегда были уже на стороне клиента. Я хочу отобразить всплывающее окно, но получить данные из базы данных.

есть идеи?

Answer 1

Итак, вы хотите всплывающее окно при загрузке? Рендеринг страницы с всплывающим окном с возможностью закрытия всплывающего окна. Прочитайте строку запроса на сервере и выполните рендеринг любого содержимого в одну операцию. Требуется только JS - скрыть всплывающее окно.

Answer 2

Вы можете использовать facebox . Программно вызвать довольно кросс-браузерное всплывающее окно, как это:

$('#someLink').click(function(e) {
    e.preventDefault();
    $.facebox({ ajax: '/product/rubberball.aspx?promo=promo123' });
});

Answer 3

Если вы действительно думаете об этом, нет причин возвращаться к серверу в такой ситуации. Вы можете просто проверить на стороне сервера, был ли передан параметр promo GET, и, если это так, отобразить скрытый <div> с информацией о повышении:

<div style='display: none;' id='promo'>
....
</div>

Как только вы это сделаете, вы можете просто иметь некоторый код jQuery, чтобы проверить, существует ли этот скрытый <div>, и, если это так, отобразить модальное значение:

$(function() {
    if($('#promo').length > 0) {
        showModal($('#promo').html());
    }
});

Если вы настаиваете на запросе к серверу через AJAX, это тоже довольно просто сделать:

function gup( name ) {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

$(function() {
    var promo = $.trim(gup('promo'));
    if(promo != '') {
        $.get('my/url/whatever.php', {promo: promo}, function(data) {
            showModal(data);
        });
    }
});

Поскольку вы сказали, что имеете опыт показа модальных окон с помощью jQuery, я не буду вдаваться в подробности того, что должен делать showModal; достаточно сказать, что он должен просто активировать все, что использует ваш плагин jQuery для отображения модального окна.