JQuery Dialog(JS 模态窗口,可拖拽的DIV)

JQuery Dialog(JS 模态窗口,可拖拽的DIV)攻略

什么是JQuery Dialog?

JQuery Dialog是基于JQuery库封装的一个JS模态窗口组件，可轻松实现模态窗口的弹出、拖拽、关闭等功能。

如何使用JQuery Dialog?

1. 引入JQuery和JQuery Dialog库

在页面中引入JQuery和JQuery Dialog的库文件，可以通过CDN方式或下载到本地进行引入。

```html

```

1. 创建一个基本的模态窗口

在HTML文件中创建一个div元素，并设置其样式，作为模态窗口的基本结构。

```html

This is the basic dialog.

```

1. 绑定模态窗口事件

使用JQuery Dialog的方法对模态窗口进行操作，一般使用的方法有：

• dialog()：弹出模态窗口
• draggable()：设置模态窗口可拖拽
• resizable()：设置模态窗口可缩放
• close()：关闭模态窗口

javascript
$(function() {
// 弹出模态窗口
$("#dialog").dialog({
autoOpen: false, // 自动打开模态窗口，默认为true
draggable: true, // 设置模态窗口可拖拽
resizable: true, // 设置模态窗口可缩放
modal: true, // 设置模态窗口为模态
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// 点击按钮弹出模态窗口
$("#btn-open-dialog").on("click", function() {
$("#dialog").dialog("open");
});
// 关闭模态窗口
$("#btn-close-dialog").on("click", function() {
$("#dialog").dialog("close");
});
// 设置模态窗口可拖拽
$("#dialog").draggable();
});

JQury Dialog示例1：弹出对话框

HTML代码：

<button id="btn-open-dialog">Open Dialog</button>

<div id="dialog-message" title="Dialog Title">
  <p>This is a dialog message.</p>
</div>

JavaScript代码：

$(function() {
  $("#dialog-message").dialog({
    autoOpen: false, // 自动打开模态窗口，默认为true
    draggable: true, // 设置模态窗口可拖拽
    resizable: true, // 设置模态窗口可缩放
    modal: true, // 设置模态窗口为模态
    buttons: {
      "Ok": function() {
        $(this).dialog("close");
      }
    }
  });

  $("#btn-open-dialog").click(function() {
    $("#dialog-message").dialog("open");
  });
});

示例效果：点击按钮弹出一个对话框。

JQury Dialog示例2：自定义对话框操作

HTML代码：

<button id="btn-open-dialog">Open Dialog</button>

<div id="dialog-message" title="Dialog Title">
  <p>This is a dialog message.</p>
  <div>
    <button id="btn-cancel-dialog">Cancel</button>
    <button id="btn-ok-dialog">Ok</button>
  </div>
</div>

JavaScript代码：

$(function() {
  $("#dialog-message").dialog({
    autoOpen: false, // 自动打开模态窗口，默认为true
    draggable: true, // 设置模态窗口可拖拽
    resizable: true, // 设置模态窗口可缩放
    modal: true, // 设置模态窗口为模态
    buttons: {
      "Ok": function() {
        alert("Ok");
        $(this).dialog("close");
      },
      "Cancel": function() {
        alert("Cancel");
        $(this).dialog("close");
      }
    }
  });

  $("#btn-open-dialog").click(function() {
    $("#dialog-message").dialog("open");
  });

  $("#btn-ok-dialog").click(function() {
    alert("click ok button");
    $("#dialog-message").dialog("close");
  });

  $("#btn-cancel-dialog").click(function() {
    alert("click cancel button");
    $("#dialog-message").dialog("close");
  });
});

示例效果：点击按钮弹出一个自定义操作的对话框，可执行自定义业务逻辑。