Best Way to Handle ASP.NET Ajax Modal on MouseOver - Only Pulling Data at Time of Request_问答_开发者

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

开发者 https://www.devze.com 2023-04-03 00:55 出处：网络

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 pu

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?

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:

Attach a click handler to the <a id="create-modal">
Define an event handler function in the mouseover variable (so we can unbind it later)
Create a modal from <div id="modal-content">.
Attach the event handler for the mouseover event.
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.
Lastly, we unbind the event handler so it will only be invoked on the first mouseover event.