弹窗是一个非常流行的对话框,弹窗可以覆盖在页面上展示。
弹窗可用于显示一段文本,图片,地图或其他内容。
创建一个弹窗,需要使用 和 注意: 这是一个简单的弹窗 如果你需要为弹窗添加内边距与外边距可以在 默认情况下,点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。
如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性(不推荐)。
你也可以在弹窗上添加关闭按钮,按钮上使用 data-rel="back"
属性,并通过样式来控制按钮的位置。
默认情况下,弹窗会直接显示在点击元素的上方,如果需要控制弹窗的位置,可以在用于打开弹窗的点击链接上使用 data-position-to 属性。
控制弹窗位置的三种方式: 默认情况下,弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果(
弹窗方向小边框
如果需要添加弹窗方向小边框,可以使用 data-arrow 属性,并指定值
"l" (左边), "t" (顶部), "r" (右边) or "b" (底部): 左边框的方向。 你可以将弹窗制作为一个标准的对话框 (头部, 内容和底部标记): 你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。 默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景,使用 data-overlay-theme="b" 添加深色的覆盖背景: 在我身后有个深色背景。 一般图片弹窗经常使用背景覆盖: 注意: 在接下来的章节中,你将了解到如何在弹窗中使用表单。
显示弹窗
关闭弹窗
定位弹窗
描述
实例
右侧关闭按钮
左侧关闭按钮
使用 data-dismissible 属性
实例
属性值
描述
data-position-to="window"
弹窗在窗口居中显示
data-position-to="#myId"
弹窗显示在知道的 #id 元素上
data-position-to="origin"
默认。弹窗显示在点击的元素上。
Window
id="demo"
Origin
过渡
打开弹窗
弹窗对话框
打开对话框弹窗
头部文本..
图片弹窗
你可以在弹窗中显示图片:
实例
弹窗背景覆盖
Show Popup