HTML/Javascript popup box with table

javascript html popup

34,071

Solution 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>

Solution 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 :

#help{
    display:none;
}

34,071

Author by

newSpringer

Updated on September 11, 2020

Comments

newSpringer over 3 years

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)?