在 MouseOver 上处理 ASP.NET Ajax 模式的最佳方法 - 仅在请求时提取数据答案

【问题标题】：Best Way to Handle ASP.NET Ajax Modal on MouseOver - Only Pulling Data at Time of Request在 MouseOver 上处理 ASP.NET Ajax 模式的最佳方法 - 仅在请求时提取数据
【发布时间】：2011-09-07 14:45:37
【问题描述】：

我正在寻找一个模态弹出窗口，它只在鼠标悬停时将数据拉到模态弹出窗口内，所以我不必预加载大量数据 - 相反，我希望它在该点拉数据鼠标悬停 - 是否有任何现有的脚本/框架可以让这变得简单？

【问题讨论】：

标签： javascript asp.net ajax modal-dialog modalpopupextender

【解决方案1】：

这可以通过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>

代码简短说明：

将click 处理程序附加到<a id="create-modal">
在mouseover 变量中定义一个事件处理函数（这样我们以后可以取消绑定）
从<div id="modal-content"> 创建一个模式。
为mouseover 事件附加事件处理程序。
在mouseover 事件处理程序中，我们使用jQuery 的load() 函数从服务器获取modal.html 并将其塞入#modal-content 元素中。
最后，我们unbind 是事件处理程序，因此它只会在第一个mouseover 事件上被调用。

【讨论】：