如何使用jQuery Mobile创建一个照片灯箱弹出窗口

使用jQuery Mobile可以轻松地创建一个照片灯箱弹出窗口，以下是具体步骤：

1. 引入jQuery库和jQuery Mobile库

首先，在你的HTML文件头部引入jQuery库和jQuery Mobile库。你可以使用CDN，或者将它们下载到本地文件中：

<!-- 引入jQuery库 -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.css">
<script src="https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.js"></script>

1. 创建一个图片弹出窗口

在你的HTML文件中创建一个链接或按钮，并添加一个自定义属性data-rel="popup"来告诉jQuery Mobile这是一个弹出窗口。然后，也需要一个空的<div>元素来承载弹出窗口，使用data-role="popup"也来告诉jQuery Mobile这是一个弹出窗口容器。在<div>元素中添加一个<img>元素，在src属性中设置照片的URL。

<a href="#popupPhoto" data-rel="popup"><img src="photo.jpg"></a>

<div data-role="popup" id="popupPhoto">
  <img src="photo.jpg">
</div>

1. 配置弹出窗口

上述代码仅仅创建了容器和图片，但没有描述如何使弹出窗口能够工作。在创建的图片<div>元素下方，增加data-position-to属性并将其设置为window，该属性设定弹出窗口的相对位置。接下来，还有两个针对弹出窗口的属性需要设置。data-transition指定弹出窗口的动画类型，data-dismissible指定弹出窗口是否允许通过点击任何地方关闭窗口。

<div data-role="popup" id="popupPhoto" data-position-to="window" data-transition="fade" data-dismissible="true" class="ui-content">
  <img src="photo.jpg">
</div>

到这里，你已经成功创建了一个照片弹出窗口。用户可以单击链接或按钮来打开这个弹出窗口，单击任何地方也可以关闭它。此外，你还可以对其进行自定义配置，比如增加一个关闭按钮等。

以下是两个示例：

示例1：增加关闭按钮

在弹出窗口中增加一个关闭按钮，代码如下：

<div data-role="popup" id="popupPhoto" data-position-to="window" data-transition="fade" data-dismissible="true" class="ui-content">
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  <img src="photo.jpg">
</div>

示例2：设置弹出窗口的宽度和高度

增加一个style属性来设置弹出窗口的宽度和高度，代码如下：

<div data-role="popup" id="popupPhoto" data-position-to="window" data-transition="fade" data-dismissible="true" class="ui-content" style="max-width:400px; max-height:600px;">
  <img src="photo.jpg">
</div>

通过以上两个示例，你可以更好地理解如何使用jQuery Mobile创建一个照片灯箱弹出窗口。