如何将ui jQuery对话框转换为模式引导？

<button id="open-dialog">打开对话框</button>
<div id="dialog-container" style="display: none;">
  <!-- 对话框内容 -->
</div>

$(document).ready(function() {
  $("#open-dialog").click(function() {
    $("#dialog-container").dialog({
      modal: true, // 设置为模式对话框
      width: 400, // 设置对话框宽度
      height: 300, // 设置对话框高度
      // 其他选项...
    });
  });
});

<div id="dialog-container" style="display: none;">
  <p>这是一个模式对话框示例。</p>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name">
  </form>
</div>

$(document).ready(function() {
  $("#open-dialog").click(function() {
    $("#dialog-container").dialog({
      modal: true,
      width: 400,
      height: 300,
      buttons: {
        "确定": function() {
          // 点击确定按钮的处理逻辑
        },
        "取消": function() {
          $(this).dialog("close"); // 关闭对话框
        }
      },
      close: function() {
        // 对话框关闭时的处理逻辑
      }
      // 其他选项...
    });
  });
});