jQuery-UI是一個非常流行的JavaScript庫，它提供了一些方便的工具來簡化Web開發。其中包括彈出層的實現，這是一個非常常見的功能。下面我們將演示如何使用jQuery-UI來創建一個彈出層。

首先，我們需要為我們的HTML頁面引用jQuery-UI庫：

<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

然后，我們需要創建一個按鈕來觸發彈出層的顯示。我們可以這樣做：

<button id="show-dialog">顯示彈出框</button>

接下來，我們需要為這個按鈕綁定一個單擊事件，這個事件將顯示我們的彈出層。可以使用下面的代碼：

$(document).ready(function() {
$("#show-dialog").click(function() {
$("#dialog").dialog({
modal: true, // 設置為模態對話框，禁用背景操作
autoOpen: false, // 禁止自動打開對話框，需要手動打開
buttons: {
"關閉": function() {
$(this).dialog("close"); // 關閉對話框
}
}
});
$("#dialog").dialog("open"); // 打開對話框
});
});

最后，我們需要創建對話框的內容。這可以通過以下方式完成：

<div id="dialog" title="示例對話框">
<p>這是一個示例對話框。</p>
</div>

現在，當我們單擊“顯示彈出框”按鈕時，我們會看到一個帶有標題“示例對話框”的模態對話框。它包含一個簡單的段落文本，以及一個“關閉”按鈕，單擊它會關閉對話框。