Лучший способ обработать ASP.NET Ajax Modal на MouseOver - только извлечение данных во время запроса - PullRequest
0 голосов
/ 07 сентября 2011

Я хочу создать модальное всплывающее окно, которое извлекает данные только из модального всплывающего окна в точке наведения мыши, поэтому мне не нужно предварительно загружать тонну данных - вместо этого я бы хотел, чтобы данные извлекались в точке о наведении мыши - существуют ли какие-либо существующие скрипты / фреймворки, которые облегчили бы это?

1 Ответ

1 голос
/ 08 сентября 2011

Это может быть достигнуто довольно легко с jQuery и SimpleModal :

<!DOCTYPE html>
<html>
  <head>
    <title>Load modal content on hover</title>
    <link href="css/demo.css" rel="stylesheet">
    <link href="css/basic.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script src="jquery.simplemodal.1.4.1.js"></script>
    <script>

      (function($) { $(function() {
        $("#create-modal").click(function() {
          var mouseover = function() {
            $("#modal-content").load("modal.html");
            $(this).unbind("mouseover", mouseover);
          };

          $("#modal-content").modal();
          $("#simplemodal-container").mouseover(mouseover);

          return false;
        });
      });})(jQuery);

    </script>
  </head>
  <body>
    <div id="modal-content"></div>
    <a href="#" id="create-modal">Create modal</a>
  </body>
</html>

Краткое объяснение кода:

  1. Присоедините обработчик click к <a id="create-modal">
  2. Определить функцию-обработчик события в переменной mouseover (чтобы мы могли отсоединить ее позже)
  3. Создать модал из <div id="modal-content">.
  4. Присоедините обработчик события mouseover.
  5. В обработчике событий mouseover мы используем функцию load() jQuery, чтобы извлечь modal.html с сервера и вставить его в элемент #modal-content.
  6. Наконец, мы unbind обработчик событий, поэтому он будет вызываться только при первом mouseover событии.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...