I'm trying to create a custom pop-up window using JavaScript which can hold a form, and then use the contents of this form on the original page.

What I have is a large table split into several sections which hold text. Each section has a title and a body (Which are both table cells which unique IDs). I then use JavaScript to pull content from a form and paste the information into this table (Using the getElementById...innerHTML method). The problem is that the page bees way too big to fit the table and the form on... Any ideas???

I'm trying to create a custom pop-up window using JavaScript which can hold a form, and then use the contents of this form on the original page.

What I have is a large table split into several sections which hold text. Each section has a title and a body (Which are both table cells which unique IDs). I then use JavaScript to pull content from a form and paste the information into this table (Using the getElementById...innerHTML method). The problem is that the page bees way too big to fit the table and the form on... Any ideas???

• javascript
• html

• If you can give us some idea of what the data looks like, we can help better. – Rap Commented Nov 26, 2009 at 17:32

2 Answers 2

If you are willing to use jQuery then you have some options:

For a dialog box / pop-up scenario, simple-modal dialog is quite nice. You can integrate it via div elements on your main page and this way you can avoid having to manage additional windows in javascript.

If you wish to add paging, filtering and search to your large table DataTables is top notch. It can be applied to a standard html table and is very versatile. It will allow you to hide columns as well, so I would think you could store your identity keys in those columns and use the dialog box easily.

JD-Daz -

I wouldn't use a pop-up. Nobody likes pop-ups, because they are not connected to the original window, and they are reliant on the windowing system of the host operating system. Also, this is useless in tabbed browsers. Instead, you should use a free-floating DIV element as the container of the table. You can allow the table to be scrolled inside the DIV element as appropriate.

-- Mark