Search code examples
javascriptasp.netajaxmodal-dialogmodalpopupextender

Best Way to Handle ASP.NET Ajax Modal on MouseOver - Only Pulling Data at Time of Request

I'm looking to create a modal popup that only pulls the data inside the modal popup at the point of mouseover, so i dont have to preload a ton of data - instead i would like it to pull the data at the point of mouseover - are there any existing scripts/frameworks out there that would make this easy?

Solution

  • This can be achieved quite easily with jQuery and 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>

    Short explanation of the code:

    1. Attach a click handler to the <a id="create-modal">
    2. Define an event handler function in the mouseover variable (so we can unbind it later)
    3. Create a modal from <div id="modal-content">.
    4. Attach the event handler for the mouseover event.
    5. Within the mouseover event handler, we use jQuery's load() function to fetch modal.html from the server and jam this into the #modal-content element.
    6. Lastly, we unbind the event handler so it will only be invoked on the first mouseover event.