php和jquery ui弹出框,jquery弹出框插件jquery.ui.dialog用法分析

PHP和jQuery UI弹出框都是常用的Web开发工具。下面简单介绍一下jQuery UI弹出框插件`jquery.ui.dialog`的用法。

1. 引入jQuery和jQuery UI库文件

在HTML文件中引入jQuery和jQuery UI库文件：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. 创建一个弹出框

在JavaScript代码中，使用`jquery.ui.dialog`方法创建一个弹出框。

$(function() {
  $("#dialog").dialog();
});

其中，`#dialog`是一个指向弹出框DOM元素的CSS选择器。这个DOM元素可以是一个`<div>`标签。

3. 设置弹出框选项

`jquery.ui.dialog`方法可以接收一个选项对象作为参数，用于设置弹出框的一些属性。

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    title: "弹出框标题",
    width: 400,
    height: 300,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });
});

常用选项包括：

- `autoOpen`：是否在页面加载完成后自动打开弹出框，默认为`true`。
- `modal`：是否为模态弹出框，默认为`false`。
- `title`：弹出框标题。
- `width`和`height`：弹出框宽度和高度。
- `buttons`：自定义按钮。

4. 打开和关闭弹出框

使用`jquery.ui.dialog`方法中的`open`和`close`方法打开和关闭弹出框。

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    title: "弹出框标题",
    width: 400,
    height: 300,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });
  
  $("#openDialogBtn").click(function() {
    $("#dialog").dialog("open");
  });
});

其中，`#openDialogBtn`是一个指向打开弹出框按钮DOM元素的CSS选择器。

以上是`jquery.ui.dialog`的用法分析，希望能对你有所帮助。