jQuery Mobile是一款使用HTML5和jQuery開發的移動應用程序框架，它提供了許多樣式化和交互特性，使開發移動應用程序更加容易快捷。其中一個常用的功能是彈窗，可以在移動應用程序中快速顯示內容或提示信息。

在jQuery Mobile中，可以使用彈窗小部件來創建自定義彈窗，彈窗小部件有幾種不同類型。例如，警告彈窗用于顯示警告信息，對話框彈窗用于在用戶與應用程序交互時請求輸入或確認。以下是一個基本的警告彈窗示例：

<div data-role="popup" id="warning-popup" data-theme="a" class="ui-corner-all">
<p>這是一條警告信息！</p>
</div>

該代碼包含一個帶有“警告”文本的彈窗部件。由于在彈窗的div標記中使用了data-role屬性的“popup”值，因此它會被識別為彈窗小部件，而data-theme屬性定義了彈窗的顏色主題。class屬性用于讓彈窗外觀更加圓潤，并將內容都包含在圓角矩形內。

要觸發此彈窗，可以使用以下JavaScript代碼：

$("#warning-popup").popup("open");

在打開彈窗時，也可以執行其他動作，例如更改彈窗文本或在彈窗關閉時執行某些操作。以下是一個更完整的示例，其中定義了一個對話框彈窗，該彈窗要求用戶輸入姓名并在確認時向控制臺輸出輸入的姓名：

<div data-role="popup" id="name-dialog" data-overlay-theme="a" data-theme="b" data-dismissible="false" class="ui-corner-all">
<div data-role="header" class="ui-corner-top">
<h1>歡迎！</h1>
</div>
<div data-role="content" class="ui-corner-bottom ui-content">
<h3 class="ui-title">請輸入您的名字：</h3>
<p><label for="name-input">姓名:</label><input type="text" id="name-input" value=""/></p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">取消</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" onclick="console.log($('#name-input').val())">確認</a>
</div>
</div>

該代碼包含一個帶有“歡迎”標題和輸入姓名表單的對話框彈窗。data-role屬性定義該彈窗為Popup小部件的特定類型，而data-overlay-theme和data-theme屬性定義了彈窗覆蓋和樣式主題。在對話框彈窗中，可以使用data-dismissible屬性來防止用戶通過單擊彈窗外部來關閉它。class屬性可用于定義不同的樣式和外觀選項。

要顯示此對話框彈窗，可以使用以下JavaScript代碼：

$("#name-dialog").popup("open");

使用jQuery Mobile的彈窗小部件可以輕松創建各種類型的彈窗，并且可以根據需要進行自定義。希望本文對您有所幫助！