添加DIV的内部模态对话框HTML5

Question

我试图谷歌但没找到我正在寻找的。

我需要一个示例示例代码或资源链接来创建modal dialog框，我希望在对话框中包含two boxes(div's)。

different content时，我必须在两个方框内（对话框内）插入user clicks。

我知道如何创建一个对话框，但我想特别知道如何在其中插入divs。

我希望我的问题很明确。请帮忙。

Answer 1

如果您只是想查看代码，请查看http://www.pixelvalet.com的工作部分（好吧！我的网站，但它会帮助您吗？）。

我处理这个问题的方式是：

1. 首先我在主html文件中添加了模板（我需要的所有空div，我将在后面填充）

2. 接下来我给父母一个hidden css样式，其中包含所有div。

3. 然后我添加了一个逻辑，告诉浏览器点击了哪个链接，然后使用ajax适当地填充模板中的div

4. 然后它会慢慢淡入使用jQuery

但是这不是你可能做到这一点的唯一方法。有很多插件可以帮助你创建一个模态框。但我选择了这条路线，因为我希望它完全定制。

希望它有所帮助。

Answer 2

我已经使用了bootstrap模式用于对话框，它很适合你在这里查看：

http://getbootstrap.com/javascript/#modals

基本思路是将对话框代码放在页面底部，

<div id="my_dialog">
 content 
</div>

你将它分离到你正在使用的jquery或其他框架中，或者只是纯粹的js。 在jquery中你可以这样做：

var my_dialog = $( "#my_dialog" ).detach();

现在，当您需要显示它时，您只需将其附加到您想要显示的位置即可。 在您附加它之前，您可以插入您想要的任何内容。 但我建议你更容易使用bootstrap的模态。