弹出框控件类似于提示框,它在鼠标点击到元素后显示,不过它可以显示更多的内容
可以在任何 html 元素上通过添加 来来创建弹出框
HTML 元素的 title 属性的内容为弹出框的标题
<a href="#" >="popover" title="弹出框标题" >="弹出框内容">多次点我</a>
提示框需要 JavaScript 脚本支持,我们可以把脚本要写在 jquery 的初始化代码里,然后在指定的元素上调用 popover() 方法
$(document).ready(function(){
$('[]').popover();
});
默认情况下,弹出框显示在元素右侧
可以使用属性
<a href="#" title="Header" >="popover" >="left" >="Content">点我</a>
<a href="#" title="Header" >="popover" >="top" >="Content">点我</a>
<a href="#" title="Header" >="popover" >="bottom" >="Content">点我</a>
<a href="#" title="Header" >="popover" >="right" >="Content">点我</a>
默认情况下,弹出框在再次点击指定元素后才会关闭
可以设置属性 在鼠标点击元素外部区域来关闭弹出框
<a href="#" title="取消弹出框" >="popover" >="focus" >="点击文档的其它地方关闭我">点我</a>
想要鼠标移入元素上显示,移出后消失的效果,可以设置属性 >
<a href="#" title="这是弹出框的头部" >="popover" >="hover" >="要显示的内容">鼠标移动到我这</a>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!