模态窗口

模态窗口

模态窗口是页面内弹出窗口，允许您在访问者不离开页面的情况下向他们显示内容。它们可用于隐藏页面内内容、视频、图像、图片库或外部网页内容。

创建模态窗口的关键是在链接中添加类“venobox”。此外，您必须添加'data-type="xxx"'，其中xxx是iframe,inline,youtube或vimeo。图像和图片库不需要数据类型。画廊确实需要一个'data-gall="galleryName"'来将图像聚集在一起。

完整的模态窗口文档．

必需的JavaScript

JS插件:Venobox在pagelet插槽1

JS初始化:Venobox在底部pagelet槽中—在大多数模板中为15

页内的内容

在模态窗口中打开隐藏的页面内容。

打开模态窗口中隐藏的页面内内容。 
 
 
In-page Content
 
Hi, I was on the page all along。
 
 

视频

在模态窗口中打开一个YouTube视频。

在模态窗口中打开YouTube视频

在模态窗口中打开一个Vimeo视频。

在模态窗口中打开vimeo视频

外部内容

 
这是一个普通面板。
 
它有一个容易覆盖的视觉风格，并被适当地抑制。
 
在模态窗口中打开www.wflynnlaw.com< / > < / p > < / div >

图像和图像库

• 
• 
• 
• 
• 
• 
• 
• 

< ul类= " large-block-grid-4 medium-block-grid-4 small-block-grid-2”> <李> < a href = " http://placeimg.com/800/600/animals " class = " venobox " data-gall =“myGallery”> < img src = " http://placeimg.com/800/600/animals " alt = "图像" > < / > < /李> <李> < a href = " http://placeimg.com/800/600/nature " class = " venobox " data-gall =“myGallery”> < img src = " http://placeimg.com/800/600/nature " alt =“自然”> < / > < /李> <李> < a href = " http://placeimg.com/800/600/people " class = " venobox " data-gall =“myGallery”> < imgsrc = " http://placeimg.com/800/600/people " alt = "图像" > < / > < /李> <李> < a href = " http://placeimg.com/800/600/arch " class = " venobox " data-gall =“myGallery”> < img src = " http://placeimg.com/800/600/arch " alt = "图像" > < / > < /李> <李> < a href = " http://placeimg.com/500/800/tech " class = " venobox " data-gall =“myGallery”> < img src = " http://placeimg.com/500/800/tech " alt = "图像" > < / > < /李> <李> < a href = " http://placeimg.com/500/800/animals " class = " venobox " data-gall =“myGallery”> < img src = " http://placeimg.com/500/800/animals "alt="image">