Jquery - Pop-up开始......如何做其余的事情

Posted 2021-04-15

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

1. 将它放在屏幕中（已完成并正常工作）
2. 只要用户在其外部单击，就会关闭该弹出窗口。 （我们需要能够点击INSIDE弹出的想法）
3. 我希望弹出窗口的html内容根据您单击的链接而改变。 （例如，我想在弹出窗口中输入链接1的列表，以及链接2的表单） - （根本不知道怎么做）

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

我做了一些研究，但有很多不同的技术，我完全失去了。我希望用最简洁/最快的方式使用jQuery做到这一点。

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

谢谢！

答案

哇，这比预期更棘手......长话短说，我编辑了你的小提琴：Here，它现在有效。

编辑：更加整洁地使用事件传播的新小提琴：http://jsfiddle.net/RYwsy/23/

第3点非常简单。如果您希望内容来自页面上的某个位置，请根据所单击链接的某些属性或其所在的上下文（例如查看其兄弟姐妹或其他内容）来查找内容。在我的示例中，我刚刚为链接添加了一个id属性，并使用它来标识包含内容的隐藏div并将其插入弹出窗口中。

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

这是否是最干净的解决方案可能是非常有争议的，但它是相当干净的，如果没有其他什么是一个很好的例子，为什么你需要了解javascript中的事件传播:-)

另一答案

你可以使用这样的东西在弹出窗口中加载HTML -

$('a').click(function(e) {
  e.preventDefault();
  var thisHREF = $(this).attr('href');
  $('popup').load(thisHREF);
});