Framework7学习笔记之 弹出层(Popover)

一：弹出层

或者说，称呼为“悬浮层”更合适。

用 popover 临时弹出一小块悬浮层显示一些信息，用户点击popover窗口外面区域时会关闭它。

二：定义Popover

弹出层需要在body标签的末尾处定义。

<body>
    ...
    <div class="popover 弹出层名">
        <div class="popover-angle"></div>
        <div class="popover-inner">
            弹出层内容
        </div>
    </div>
</body>

三：控制弹出层

<a href="#" data-popover=".弹出层名" class="open-popover">Open Popover</a>

关闭：点击弹出层之外区域即可关闭。

原文地址：https://www.cnblogs.com/ygj0930/p/8457590.html

时间： 2024-07-31 17:40:30

Framework7学习笔记之 弹出层(Popover)的相关文章

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

【Bootstrap3.0建站笔记二】按钮可下拉弹出层

1.按钮可下拉弹出层: HTML代码: <div class="porpre"> <div class="input-group-btn" style="width: auto"> <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=

前端学习代码实例-JavaScript点击按钮弹出层效果

强大的效果其实都是由一个个简单的功能组合而成的,下面介绍一下如何实现点击一个按钮弹出一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:73

弹出层详解，从简单到复杂

一.最简单的弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jQuery.reveal弹出层

jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现的,非常小,插件本身只有3K多一点,用起来也算简单明了. 废话不说了.上Demo 首先是引用部分: Html->head: <head> <meta charset="utf-8" /> <title>Reve

JS通过设置cookie来控制弹出层，首次打开页面显示弹出层

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>JS通过设置cookie来控制弹出层,首次打开页面显示弹出层,刷新页面不再显示:关闭浏览器重新打开.清除缓存cookie显示.</title&

jQuery.reveal弹出层使用

最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现的,非常小,插件本身只有3K多一点,用起来也算简单明了. 废话不说了.上Demo 首先是引用部分: Html->head: <head> <meta charset="utf-8" /> <title>Reveal Demo</title&g

制作一个有模态的弹出层

参考慕课网课程<分享:阿当大话西游之WEB组件> 定制不同的皮肤可通过对元素添加或减少class类来实现. 首先,模态是指如下图部分的灰色背景部分:(灰色部分不可点击) 然后,要记住,模态要加在当前页面的上面,以及当前操作框(通常是一个弹出层)的下面 所谓上面,下面是指: 如果模态(通常是一个div)的定位是fixed(固定定位)的,那么它将不占据文档空间, 所以,将其height和width设置为100%,另外,设置left:0;top:0.即为铺满整个屏幕. 然后,在html中,处于此di