How to create a simple modal box but pass it variables as well?

My web app allows users to create projects. All these projects are listed on their dashboard with a unique id.

I want to let users rename and delete any one project. Instead of sending them to a new page, I'd like to show them a modal dialog (grey out background with modal overlay) that lets them either rename or delete the project.

I have created two modals (hidden by default) for each the rename and d开发者_如何学Pythonelete functionality. The modals basically contain a form element that allows the user to take an action and then hit submit reloading the page with the changes. What I don't know how to do is pass the project ID to the modal box so that the form element contains the project ID as a hidden variable to submit to the controller functions.

How can I fire up a modal box through javascript and also pass a variable (the project id) to the modal box?

---

I would simply use jQuery ui's modal-form the example they give should show you what you need to do

---

Look at the templates. Keep your form markup in the template file (or put it the <script type="text/template"> with some id). Then, when you need markup of the form, you just call for certain template and pass some variables that template engine will render for you. There are many nice template engines, for example:

• EJS
• Mustache
• Pure