HTML/Javascript popup box with table

问题

In my application I have a button, when the user clicks on the button I want a popup box (not window) to appear with a table populated with information I pass in to it.

I have been looking online and cant seem to find how to do this, or even where to start (use all HTML, use all Javascript, use both HTML and Javascript). Has anyone done something similar to this or know a good starting point for this (e.g. what components to use)?

回答1:

There's a range of frameworks that'll do the trick for you.

An easy and common one is jQuery Dialog (http://jqueryui.com/dialog/)

A small example, given the html:

<div id="dialog-modal" title="Basic modal dialog" style="display:none">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<a href="#" id="openDialog">Click me</a>

Assuming you've included jQuery and jQuery dialog on top, add the following javascript:

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       $( "#dialog-modal" ).dialog({
          height: 140,
          modal: true
        });
       $( "#dialog-modal" ).show();
    });
 });
</script>

回答2:

simply use JQuery

See Demo Here

HTML :

<!DOCTYPE html>
<html lang="fa">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript">
    $(document).ready(function() {
        $("#help_button").click(function() {
            $("#help").slideToggle(1000, function() {
                if($("#help_button").val() == "close")
                {
                    $("#help_button").val("show table");
                }
                else
                {
                    $("#help_button").val("close");
                }
            });
        });
    });
    </script>
</head>

<body>

<div id="help">table populated with information </div>
<input id="help_button" type="button" value="Show Popup"/>

</body>
</html>

CSS :