如何创建一个包含表格并具有关闭按钮的弹出窗口？

Question

I am trying to create a popup when my link is clicked. I have been looking all over and all I could find was a html code like this

<p onClick="confirm('Correct?')" </p>

What I am trying to create is a popup that display a table with name, zip code etc

so basically instead of the popup displaying correct like the code above does?, I want it to display somethings of my own choosing. I am looking for one that has a close button at the top it.

Thanks everyone.

Answer 1

So. You'll need a javascript function named showTable() and a div having an id: popup. Change code to: <p onClick="ShowTable(ID)" </p> , where ID is the table's ID. Store the table's values in a javascript array.

The ShowTable should consist of:

function showTable(id){document.getElementById("popup").style.display=block;
document.getElementById("popup").innerHTML=table[id];}

Also, the table[id] should conatin this too: <a href="#" onclick="closePopup();">Close popup</a>

And add this function:

function closePopup(){
document.getElementById("popup").style.display=none;
}

To make it more designed, you could use jQuery animations.

Answer 2

Perhaps the option that requires the least amount of work on your end would be using jQuery UI, which has a Dialog plugin. You would need to be somewhat familiar with jQuery, though. Here's the link: http://jqueryui.com/demos/dialog/