jQuery-UI是一个非常流行的JavaScript库，它提供了一些方便的工具来简化Web开发。其中包括弹出层的实现，这是一个非常常见的功能。下面我们将演示如何使用jQuery-UI来创建一个弹出层。

首先，我们需要为我们的HTML页面引用jQuery-UI库：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

现在，当我们单击“显示弹出框”按钮时，我们会看到一个带有标题“示例对话框”的模态对话框。它包含一个简单的段落文本，以及一个“关闭”按钮，单击它会关闭对话框。