This is probably not the best implementation but the idea is there. First you will be needing a <div> which you will fill with either a semi-transparent black image:
Note: Using only CSS for a dialog (another answer has suggested doing it that way) isn't that good, as you will not be able to make cool fading transitions and you wont be able to make it close with a button or link.
yeah, it kind of looks like a jquery ui dialog plugin. I've actually been looking into creating something similar and it's my understanding that those ui dialogs are pretty customizable. Here's a basic tutorial I found on youtube http://www.youtube.com/watch?v=b16V25eNyJY. Hope this helps.
发布评论
评论（5）
Steve 使用：http://trentrichardson.com/Impromptu/ 作为教程页面上的消息框。
您可能会喜欢这篇文章，其中描述了他在创建 learn.knockoutjs.com 时使用的开源工具：http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/
Steve used: http://trentrichardson.com/Impromptu/ for the message boxes on the tutorial pages.
You might like this post that describes the open source tools that he used in creating learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/
快速浏览一下下面的示例：
http://jsfiddle.net/2q7xT/
说明：
这可能不是最好的实现，但想法是存在的。首先，您需要一个
，您将用半透明的黑色图像填充它：我使用了 RGBA 技术，但并非所有浏览器都支持它。
第二种解决方案是用黑色填充div，例如：
然后使用跨浏览器
opacitycss属性来降低不透明度：最重要的部分是这个div应该有
位置：固定；且z-index低于其上方元素的z-index。Have a quick look at the example below:
http://jsfiddle.net/2q7xT/
Explanation:
This is probably not the best implementation but the idea is there. First you will be needing a
<div>which you will fill with either a semi-transparent black image:I used the RGBA technique but it's not supported by all browsers.
The second solution is to fill the div with a black color such as:
and then use the Cross-browser
opacitycss attribute to reduce the opacity:The most important part is that this div should have
position: fixed;and az-indexlower than thez-indexof the element above it.这称为灯箱或模态框。有几个很酷的 jQuery 灯箱插件。以下是一些：
FancyBox
ColorBox
LightView
我建议使用 FancyBox 或 ColorBox 来完成您想要做的事情。 FancyBox 是我的最爱。
以下是排名前 10 的 jQuery modalbox 插件： 前 10 个 jQuery 模态框插件
注意：仅对对话框使用 CSS（另一个答案建议这样做）并不是那么好，因为你将无法变得很酷淡入淡出的过渡，您将无法使用按钮或链接将其关闭。
我希望这有帮助。
That's called a lightbox, or, a modal box. There are several cool jQuery lightbox plugins. Here are a few:
FancyBox
ColorBox
LightView
I suggest FancyBox or ColorBox for what you're trying to do. FancyBox is my favorite.
Here are the top 10 jQuery modalbox plugins: Top 10 jQuery Modal Box Plugins
Note: Using only CSS for a dialog (another answer has suggested doing it that way) isn't that good, as you will not be able to make cool fading transitions and you wont be able to make it close with a button or link.
I hope this is helpful.
是的，它看起来有点像 jquery ui 对话框插件。实际上，我一直在考虑创建类似的东西，据我所知，这些 ui 对话框是非常可定制的。这是我在 youtube 上找到的基本教程 http://www.youtube.com/watch?v=b16V25eNyJY 。希望这有帮助。
yeah, it kind of looks like a jquery ui dialog plugin. I've actually been looking into creating something similar and it's my understanding that those ui dialogs are pretty customizable. Here's a basic tutorial I found on youtube http://www.youtube.com/watch?v=b16V25eNyJY. Hope this helps.
格林科特。
如果你查看网页源代码，它会给你一个像这样的 div：
从那里你可以覆盖锚点或其他任何东西
Glinkot.
If you look at the web pages source code it gives you a div like this:
from there you can just overlay anchors or whatever else