javascript 如何在 HTML 中创建弹出窗口（模态对话框）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5337417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create popup window(modal dialog box) in HTML
提问by Captain Comic
On my web site a have a page where where user can ask questions. Now I want to add Add Image button that must invoke kinda modal dialog box where user needs to upload the picture from computer. Then window is closed and link to image is placed back to post.
在我的网站上有一个页面，用户可以在其中提问。现在我想添加添加图像按钮，该按钮必须调用用户需要从计算机上传图片的模态对话框。然后关闭窗口并将图像链接放回发布。
I wanna do something similar like in SO https://stackoverflow.com/questions/ask- try pressing Image button and u'll see nice popup window coming up.
我想做一些类似于https://stackoverflow.com/questions/ask 中的类似操作- 尝试按下“图像”按钮，你会看到漂亮的弹出窗口出现。
Please suggest what is best way to implement that stuff. I am asking for code snippet rather about technology
请建议什么是实现这些东西的最佳方式。我要的是代码片段而不是技术
采纳答案by Matt
You will need client side scripting. I reccomend learning Javascript, then Jquery, then Jquery UI. If you know php it should not be too dificult to pickup the basics.
您将需要客户端脚本。我建议学习 Javascript，然后是 Jquery，然后是 Jquery UI。如果您了解 php，那么掌握基础知识应该不会太难。
回答by Ashwin Krishnamurthy
Perhaps this could be of some help once you have started http://jqueryui.com/demos/dialog/#modal-form. Other wise you can use the DOM structure and create each and every element using appendChild and CreateElement and use css to give a good look.
也许这会在您启动http://jqueryui.com/demos/dialog/#modal-form后有所帮助。其他明智的做法是，您可以使用 DOM 结构并使用 appendChild 和 CreateElement 创建每个元素，并使用 css 来美观。
回答by sushil bharwani
That popup window you can do by using any jQuery Library like colorbox. For image upload thing you will have to alternately look for some Flash Based or Java based uploads.
您可以使用任何 jQuery 库（如 colorbox）来执行该弹出窗口。对于图像上传，您将不得不交替寻找一些基于 Flash 或基于 Java 的上传。
http://colorpowered.com/colorbox/core/example1/index.htmlhttp://swfupload.org/
http://colorpowered.com/colorbox/core/example1/index.htmlhttp://swfupload.org/
回答by Mohammad Efazati
easy as drink water ;)
像喝水一样简单;)
with jquery create pop up ... like this ( http://fancybox.net/) and then add form to pop up for upload image ... then when file uploaded only return absolute address to parent editor ... now you can show your image ;)
使用 jquery 创建弹出...像这样（http://fancybox.net/）然后添加表单以弹出上传图片...然后当上传的文件只返回绝对地址给父编辑器...现在你可以展示你的形象;)
