该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用。它支持IE7以上的浏览器。

首先要引入需要的css  js  文件

<link rel="stylesheet" href="jquery.webui-popover.css">
<script src="jquery.js">
</script> <script src="jquery.webui-popover.js"></script>
使用 :  $('a').webuiPopover(options);

简单的弹出菜单:

$('a').webuiPopover({title:'Title',content:'Content'});

在DOM中使用 data-* 属性创建弹出层:

<a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
$('a').webuiPopover();

或者设置一个div层,添加类名 webui-popover-content

<a href="#" >shop pop</a> <div class="webui-popover-content"> <p>popover content</p> </div>
$('a').webuiPopover();

参数:

{placement:'auto',//值: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left  要显示的位置width:'auto',//可以设置数字 height:'auto',//可以设置数字 trigger:'click',//值:click,hover 触发方式 style:'',//值:'',inverse delay:300,//延迟时间, 悬浮属性才执行 cache:true,//如果缓存设置为false,将重建 multi:false,//在页面允许其他弹出层 arrow:true,//是否显示箭头 title:'',//标题,如果标题设置为空字符串时,标题栏会自动隐藏 content:'',//内容,内容可以是函数 closeable:false,//显示关闭按钮 padding:true,//内容填充 type:'html',//内容类型, 值:'html','iframe','async' url:''//如果不是空的,插件将通过url加载内容 }

转载于:https://www.cnblogs.com/maxiag/p/10286028.html

webui-popover 一个轻量级的jquery弹出层插件相关推荐

  1. html 弹出层插件,jQuery弹出层插件(原创)

    插件描述:简约的jQuery弹出层插件 更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...

  2. Jquery弹出层插件ThickBox的使用方法

    这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...

  3. jbox弹窗_强大的jquery弹出层插件jBox

    jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法 在页面中引入jBox.all.min.css.jquery和j ...

  4. jquery 弹出层插件

    最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...

  5. Lightbox弹出层插件:jQuery弹出层插件用法

    插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件 说明文档  : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...

  6. layer——极简的jquery弹出层插件

    官网:http://layer.layui.com/ 作者:贤心  jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...

  7. 分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js

    最终效果: 插件原理 所有弹出层的原理都差不多,就是用一个全屏半透明DIV做遮罩层,在这个遮罩层上再显示出一个层放要显示的内容,其他的就是CSS的运用了. 本插件为了使用简单,把JS跟CSS封装在了一 ...

  8. [置顶]       推荐一款好用的jquery弹出层插件——wbox

    在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标 ...

  9. 推荐一款好用的jquery弹出层插件——wbox

    阅读原文:http://www.xuejiehome.com/blread-1621.html 在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点 ...

  10. Jquery弹出层插件,非常好用绚丽Lee dialog 1.0

    标题 弹出层的html如下: <div id="floatBoxBg"></div> <div id="floatBox" cla ...

最新文章

  1. 新十年嵌入式音频的五大趋势
  2. Opencv C++ 归一化
  3. windows服务,安装、启动、停止,配置,一个批处理文件搞定
  4. 判断两个对象是否相等java_判断两个对象的内容是否相等
  5. C++后台开发需要什么?
  6. Qt|C++工作笔记-QVector与Vector去重复的值
  7. 悲观锁和乐观锁_浅谈数据库悲观锁和乐观锁
  8. CALayer学习--contentsCenter属性
  9. 关于计算机中 二进制位(bit)、字节(Byte)、 千字节(KB)等之间的关系
  10. 如何使Android应用程序获取系统权限来修改系统时间
  11. 大数据分析如何助力制造行业
  12. Undefined symbols for architecture armv7
  13. 传智播客Java 方法
  14. html轮播图片在线制作,如何制作图片轮播?轮播图在线制作技巧
  15. C++搜索算法和曼哈顿距离之最少连通代价
  16. 微信浏览器视频播放探索
  17. 斐讯路由器宽带运营商服务器,新版斐讯p.to路由器的设置教程
  18. (附源码)计算机毕业设计ssm高校餐厅评价系统
  19. we learn考试能切屏吗_螺蛳粉闻臭师年薪50万,你想挑战吗?
  20. elasticsearch 实践

热门文章

  1. 不要变得迟钝,努努力,什么都迎刃而解
  2. 「Leetcode」242. 有效的字母异位词:可以拿数组当哈希表来用,但哈希值不要太大!
  3. 苹果Mac批量图像格式转换软件:XnConvert
  4. 在 Mac 上拷贝(复制)、粘贴的方法
  5. Hillstone设备管理-许可证安装
  6. spring的设计模式
  7. AngularJS的 $resource服务 关于CRUD操作
  8. 非对称加密提交表单到PHP
  9. OC学习笔记四 数据类型
  10. [转载] 大道至简:软件工程实践者的思想——第八章 你看得到工具的本质吗