创建一个简单的模态弹出窗口

Question

6

我有一个非常简单的需求。我有两个div，Div1带有一个链接，Div2包含一些文本。

在Div1中的链接被点击时，我想显示Div2作为一个简单的模态弹出窗口，有一个灰色背景和一个关闭按钮。

现在是否可能在不使用任何外部插件的情况下实现这一点？

如果不行，那么我查看了jqueryui上的一个插件。然而，在示例中引用了如此多的jquery和css文件，以至于我不知道该取什么，该留什么。

- Hitz

5个回答

4

首先，感谢 @Arnis L. 推荐 SimpleModal。

其次，存在很多模态框/灯箱插件的原因是要考虑到许多因素以创建跨浏览器兼容的东西。所以，不使用任何外部插件完成你想要的功能是可能的，但要做得好，需要大量的代码。

所以，你请求帮助来创建一个简单的模态框...为什么不试试 SimpleModal ;)

你可以下载任何示例来开始。所有你需要做的就是将 SimpleModal .js 文件包含到你的页面中并添加一些样式即可准备就绪。

- Eric Martin

1

这里有一个教程，可以教你如何做类似的事情。

- Ólafur Waage

1

不，jQuery 中没有内置的模态窗口功能。您可以使用 jQuery 来创建自己的模态窗口，但在这种情况下，您可能不会问这个问题。只需获取第三方插件。

- slikts

0

你可以不使用任何插件来完成它，但是你可能想要避免的棘手部分是模块化。

如果你希望对话框在点击和拖动时移动，你必须根据鼠标位置设置该div的位置，这可能会很快变得很卡顿。因此需要使用jqueryui选项。

我同意，有时候CSS足以让你窒息。

哦，还有一点需要说明的是，你可以通过一个按钮获得完美的灰色框，它将适应任何浏览器的UI：alert()

- Anthony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arnis Lapsa · Accepted Answer

毫无疑问，没有插件是可能的，但这可能会变成一个严重的问题。我自己在纯 JavaScript 中使用了“自制”的模态窗口实现。相信我——这不是一个好主意。即使加上 jQuery（不要与 jQuery UI 混淆）。

我建议你使用 Eric Martin 的“SimpleModal”插件（他也在StackOverflow上，并且至少尝试回答了与他的产品相关的每个问题）。我喜欢它的 API，而且它功能齐全。