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

先创建一个窗体

　　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.

 

弹出图片

Close


Close


Close