javascript - Jquery - 弹出窗口开始......如何做剩下的

Question

我正在尝试创建一个具有不同功能的干净的 jquery 弹出窗口。我不想使用插件(我想学习大声笑)。这就是我想要的。

1. 将其置于屏幕中心(已完成并有效)
2. 只要用户点击弹出窗口以外的地方，就关闭该弹出窗口。 (我们需要能够在弹出提示中点击)
3. 我希望弹出窗口的 html 内容根据您单击的链接而变化。 (例如，我想在弹出窗口中为链接 1 提供一个列表，为链接 2 提供一个表单)--(完全不知道该怎么做)

现在这是我拥有的:http://jsfiddle.net/RYwsy/2/

我做了一些研究，但那里有太多不同的技术，我完全迷失了。我想要用 jQuery 以最干净/最快的方式做到这一点。

我仍在搜索和尝试，但我也需要一些帮助。

谢谢!

Answer 1

哇，这比预期的要棘手...长话短说，我编辑了你的 fiddle :Here现在可以使用了。

编辑:更巧妙地使用事件传播的新 fiddle :http://jsfiddle.net/RYwsy/23/

第 3 点非常简单。如果您希望内容来自页面上的某处，请根据单击链接的某些属性或它所在的上下文(例如查看其 sibling 或其他内容)找到它。在我的示例中，我只是向链接添加了一个 id 属性，并使用它来识别包含内容的隐藏 div 并将其插入到弹出窗口中。

第 2 点更棘手。起初我只是将点击处理程序附加到除弹出窗口之外的所有内容，并将弹出窗口隐藏在那里。这没有用，因为来自弹出窗口的点击事件通过 dom 向上传播，并最终到达隐藏弹出窗口的某个元素。然后我添加了一个检查，检查我们是否正在单击弹出窗口，如果是，则停止那里的传播。

这是否是最干净的解决方案可能值得商榷，但它相当干净，如果没有别的，这是一个很好的例子，说明为什么你需要了解 javascript 中的事件传播:-)