欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

jQuery Mobile弹出窗、弹出层知识汇总_jquery

程序员文章站 2022-04-24 14:33:57
...
先创建一个窗体

　　Close
　　
弹出窗内容



1）点击后弹出




按钮 






2）页面加载后弹出




//页面延时加载




关键字说明：


data-overlay-theme: 背景色透明灰 data-position-to: 弹窗在窗口居中显示 data-dismissible: 是否允许单击窗口外任一位置关闭窗口（默认true为允许） data-transition: 弹出方式


下面通过代码实例详解jquery mobile 弹出层使用


引入文件








弹出层基础


创建一个弹出层，要在div标签中添加一个 data-role="popup" 属性，然后在添加一个a标签，并在a标签href属性中设置弹出div层的id,在a标签中添加属性




data-rel="popup"
To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. A popup div has to be nested inside the same page as the link.
Basic Popup



This is a completely basic popup, no options set.






简单实例








点击我弹出层



弹出层测试




 






工具提示可以通过添加一个主题创建样本基本通过ui-content弹出并添加填充




A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the ui-content class. 

A paragraph with a tooltip. Learn more




Here is a tiny popup being used like a tooltip. The text will wrap to multiple lines as needed.






提示信息实例









A paragraph with a tooltip. Learn more




Here is a tiny popup being used like a tooltip. The text will wrap to multiple lines as needed.




 






弹出图片






 





jQuery Mobile弹出窗、弹出层知识汇总_jquery
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。


相关文章
相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • jQuery Mobile弹出窗、弹出层知识汇总_jquery

    • 专题推荐

    相关标签： jquery_mobile弹出 jquery_mobile弹出层

    上一篇： 使用纯css实现qqlogo图代码

    下一篇： 利用vue实现全选反选功能

    推荐阅读