📌  相关文章
📜  jQuery UI 对话框类选项(1)

📅  最后修改于: 2023-12-03 15:02:12.568000             🧑  作者: Mango

jQuery UI 对话框类选项

jQuery UI 是一个基于jQuery的JavaScript库，可以为Web开发提供一系列交互效果和用户界面元素。其中之一就是对话框（dialog）类选项，可以快速地在网页中创建对话框元素。

使用对话框

在使用对话框之前，需要在页面中引入jQuery和jQuery UI的库文件。可以使用CDN链接，也可以下载到本地并引用。

在页面中创建一个

元素，作为对话框的容器。然后使用jQuery UI中的dialog方法初始化对话框。例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery UI Dialog</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <script>
      $(function() {
        $('#dialog').dialog();
      });
    </script>
  </head>
  <body>
    <div id="dialog" title="Dialog Title">
      This is a dialog.
    </div>
  </body>
</html>

上面的代码演示了如何创建一个对话框元素，并用默认选项初始化。dialog方法会自动将对话框设为不可见，只有在调用open方法后才会显示。

选项

除了使用默认选项，我们还可以根据自己的需求来定制对话框的外观和行为。以下是一些常用选项：

title

对话框的标题。可以是一个字符串或者HTML代码片段。

$('#dialog').dialog({
  title: 'Custom Dialog Title'
});
width

对话框的宽度，可以是一个数值（单位为像素）或者一个百分比。

$('#dialog').dialog({
  width: 500
});
height

对话框的高度，可以是一个数值（单位为像素）或者一个百分比。

$('#dialog').dialog({
  height: 300
});
resizable

对话框是否可改变大小。

$('#dialog').dialog({
  resizable: false
});
draggable

对话框是否可拖动。

$('#dialog').dialog({
  draggable: false
});
modal

对话框是否模态，即是否会阻止用户与页面交互。

$('#dialog').dialog({
  modal: true
});

更多选项请参考官方文档：https://api.jqueryui.com/dialog/