jQuery Mobile是一個基于jQuery框架的移動端Web應用程序開發框架。其中一個非常有用的組件就是遮罩（Mask）。遮罩是一種可以覆蓋頁面上某個部分并強制用戶與該部分進行交互的組件。 遮罩的使用非常簡單，只需要使用data-role屬性設置為"popup"，并指定popup位置即可。我們來看一下下面的示例代碼：

<div data-role="page">
<div data-role="header">
<h1>Welcome to jQuery Mobile!</h1>
</div><!-- /header --><div data-role="content">
<p>This is a demo of jQuery Mobile's popup feature.</p>
<a href="#popupDialog" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupDialog" data-position-to="window">
<p>This is a popup dialog.</p>
</div>
</div><!-- /content --><div data-role="footer">
<h4>Page footer</h4>
</div><!-- /footer --></div><!-- /page -->

在這個示例中，我們創建了一個頁面，并添加了一個鏈接。當用戶單擊該鏈接時，遮罩將被激活并彈出一個對話框。 從代碼中可以看出，我們使用data-role="popup"定義了一個彈出框。在這個div里，我們可以添加任何我們想要展示的內容，例如“Hello World！” 另外，我們通過data-rel="popup"屬性將彈出框與鏈接關聯起來。當用戶點擊該鏈接時，彈出框將被激活并展示。 總結：jQuery Mobile的遮罩組件非常強大，可以用來實現各種交互效果。通過簡單的幾行代碼，就可以輕松地創建強大的遮罩效果。