Home/ Questions/Q 6559653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:21:21+00:00

I’m looking to create a modal popup that only pulls the data inside the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0