Menu
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)?
252
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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
