Làm cách nào để tự động đóng hộp thoại trong jQuery?

Tùy chọn

thêm vào

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Phần tử nào mà hộp thoại (và lớp phủ, if ) sẽ được thêm vào

Ghi chú. Không nên thay đổi tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

tự độngMở

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nếu đặt thành

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  autoOpen: false
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

nút

Loại. hoặc là

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chỉ định những nút nào sẽ được hiển thị trên hộp thoại. Bối cảnh của cuộc gọi lại là phần tử hộp thoại;

• Mục tiêu. Các phím là các nhãn của nút và các giá trị là các lệnh gọi lại khi nhấp vào nút được liên kết
• Mảng. Mỗi phần tử của mảng phải là một đối tượng xác định các thuộc tính, thuộc tính và trình xử lý sự kiện để đặt trên nút. Ngoài ra, có thể sử dụng khóa

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  15 để điều khiển và khóa

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  17 có thể được sử dụng để điều khiển

Khởi tạo hộp thoại với tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});

Nhận hoặc đặt tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// Getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
 
// Setter
$( ".selector" ).dialog( "option", "buttons", 
  [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
);

các lớp học

Loại.

Vỡ nợ

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

Chỉ định các lớp bổ sung để thêm vào các thành phần của tiện ích. Bất kỳ lớp nào được chỉ định trong có thể được sử dụng làm khóa để ghi đè giá trị của chúng. Để tìm hiểu thêm về tùy chọn này, hãy xem bài viết tìm hiểu về tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

Khởi tạo hộp thoại với tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

4

5

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

Nhận hoặc đặt thuộc tính của tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

4

5

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

closeOnEscape

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chỉ định xem hộp thoại có nên đóng hay không khi hộp thoại có tiêu điểm và người dùng nhấn phím thoát (ESC)

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

đóng văn bản

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chỉ định văn bản cho nút đóng. Lưu ý rằng văn bản đóng được ẩn rõ ràng khi sử dụng chủ đề tiêu chuẩn

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

hộp thoạiClass

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

(Các) tên lớp đã chỉ định sẽ được thêm vào hộp thoại, để thêm chủ đề

Tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

kéo được

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nếu được đặt thành

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Khởi tạo hộp thoại với tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nhận hoặc đặt tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

4

5

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

chiều cao

Loại. hoặc là

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chiều cao của hộp thoại

• Số. Chiều cao tính bằng pixel
• Chuỗi. Giá trị chuỗi được hỗ trợ duy nhất là

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  42 sẽ cho phép điều chỉnh chiều cao của hộp thoại dựa trên nội dung của nó

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

ẩn giấu

Loại. hoặc hoặc hoặc hoặc

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nếu và làm thế nào để tạo hiệu ứng ẩn của hộp thoại

• Boolean. Khi được đặt thành

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  10, sẽ không có hoạt ảnh nào được sử dụng và hộp thoại sẽ bị ẩn ngay lập tức. Khi được đặt thành

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  08, hộp thoại sẽ mờ dần với thời lượng mặc định và tốc độ giảm mặc định
• Số. Hộp thoại sẽ mờ dần theo thời lượng đã chỉ định và nới lỏng mặc định
• Chuỗi. Hộp thoại sẽ bị ẩn bằng cách sử dụng hiệu ứng đã chỉ định. Giá trị có thể là tên của phương thức hoạt hình jQuery tích hợp, chẳng hạn như

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  49 hoặc tên của hiệu ứng giao diện người dùng jQuery, chẳng hạn như

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  50. Trong cả hai trường hợp, hiệu ứng sẽ được sử dụng với thời lượng mặc định và thời gian nới lỏng mặc định
• Mục tiêu. Nếu giá trị là một đối tượng, thì các thuộc tính

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  51,

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  52,

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  53 và

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  54 có thể được cung cấp. Nếu thuộc tính

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  51 chứa tên của một phương thức jQuery, thì phương thức đó sẽ được sử dụng; . Khi sử dụng hiệu ứng giao diện người dùng jQuery hỗ trợ các cài đặt bổ sung, bạn có thể đưa các cài đặt đó vào đối tượng và chúng sẽ được chuyển đến hiệu ứng. Nếu bỏ qua

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  53 hoặc

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  54 thì các giá trị mặc định sẽ được sử dụng. Nếu bỏ qua

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  51 thì sẽ sử dụng

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  59. Nếu bỏ qua

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  52 thì không sử dụng độ trễ

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

chiều cao tối đa

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chiều cao tối đa mà hộp thoại có thể thay đổi kích thước, tính bằng pixel

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

chiều rộng tối đa

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chiều rộng tối đa mà hộp thoại có thể thay đổi kích thước, tính bằng pixel

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

chiều cao tối thiểu

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chiều cao tối thiểu mà hộp thoại có thể thay đổi kích thước, tính bằng pixel

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

chiều rộng tối thiểu

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chiều rộng tối thiểu mà hộp thoại có thể thay đổi kích thước, tính bằng pixel

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

phương thức

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nếu được đặt thành

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Khởi tạo hộp thoại với tùy chọn

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

1

2

3

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

Nhận hoặc đặt tùy chọn

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

1

2

3

4

5

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

Chức vụ

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chỉ định nơi hộp thoại sẽ được hiển thị khi mở. Hộp thoại sẽ xử lý các va chạm sao cho càng nhiều hộp thoại hiển thị càng tốt

Thuộc tính

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

thay đổi kích thước

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nếu được đặt thành

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Khởi tạo hộp thoại với tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

Nhận hoặc đặt tùy chọn

{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

1

2

3

4

5

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

chỉ

Loại. hoặc hoặc hoặc hoặc

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Nếu và làm thế nào để tạo hiệu ứng hiển thị hộp thoại

• Boolean. Khi được đặt thành

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  10, sẽ không có hoạt ảnh nào được sử dụng và hộp thoại sẽ hiển thị ngay lập tức. Khi được đặt thành

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  08, hộp thoại sẽ giảm dần theo thời lượng mặc định và thời gian nới lỏng mặc định
• Số. Hộp thoại sẽ mờ dần theo thời lượng đã chỉ định và nới lỏng mặc định
• Chuỗi. Hộp thoại sẽ được hiển thị bằng hiệu ứng đã chỉ định. Giá trị có thể là tên của phương thức hoạt hình jQuery tích hợp, chẳng hạn như

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  90 hoặc tên của hiệu ứng giao diện người dùng jQuery, chẳng hạn như

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  50. Trong cả hai trường hợp, hiệu ứng sẽ được sử dụng với thời lượng mặc định và thời gian nới lỏng mặc định
• Mục tiêu. Nếu giá trị là một đối tượng, thì các thuộc tính

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  51,

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  52,

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  53 và

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  54 có thể được cung cấp. Nếu thuộc tính

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  51 chứa tên của một phương thức jQuery, thì phương thức đó sẽ được sử dụng; . Khi sử dụng hiệu ứng giao diện người dùng jQuery hỗ trợ các cài đặt bổ sung, bạn có thể đưa các cài đặt đó vào đối tượng và chúng sẽ được chuyển đến hiệu ứng. Nếu bỏ qua

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  53 hoặc

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  54 thì các giá trị mặc định sẽ được sử dụng. Nếu bỏ qua

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  51 thì sẽ sử dụng

  $( ".selector" ).dialog({
    appendTo: "#someElem"
  });

  00. Nếu bỏ qua

  $( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });

  52 thì không sử dụng độ trễ

Khởi tạo hộp thoại với tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

Nhận hoặc đặt tùy chọn

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

1

2

3

4

5

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

chức vụ

Loại.

Vỡ nợ.

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Chỉ định tiêu đề của hộp thoại. Nếu giá trị là

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Khởi tạo hộp thoại với tùy chọn

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

1

2

3

// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

Nhận hoặc đặt tùy chọn

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

1

2

3

4

5

$( ".selector" ).dialog({
  autoOpen: false
});

bề rộng

Loại.

Vỡ nợ.

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Chiều rộng của hộp thoại, tính bằng pixel

Khởi tạo hộp thoại với tùy chọn

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

1

2

3

$( ".selector" ).dialog({
  autoOpen: false
});

Nhận hoặc đặt tùy chọn

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

1

2

3

4

5

$( ".selector" ).dialog({
  autoOpen: false
});

phương pháp

đóng() Trả về. (chỉ phần bổ trợ)

Đóng hộp thoại

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức đóng

1

$( ".selector" ).dialog({
  autoOpen: false
});

destroy() Trả về. (chỉ phần bổ trợ)

Loại bỏ hoàn toàn chức năng hộp thoại. Điều này sẽ đưa phần tử trở lại trạng thái khởi tạo trước

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức hủy

1

$( ".selector" ).dialog({
  autoOpen: false
});

instance() Trả về.

Truy xuất đối tượng thể hiện của hộp thoại. Nếu phần tử không có phiên bản liên kết, thì trả về

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Không giống như các phương thức tiện ích con khác,

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức thể hiện

1

$( ".selector" ).dialog({
  autoOpen: false
});

isOpen() Trả về.

Hộp thoại hiện đang mở hay không

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức isOpen

1

$( ".selector" ).dialog({
  autoOpen: false
});

moveToTop() Trả về. (chỉ phần bổ trợ)

Di chuyển hộp thoại lên đầu ngăn xếp hộp thoại

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức moveToTop

1

$( ".selector" ).dialog({
  autoOpen: false
});

open() Trả về. (chỉ phần bổ trợ)

Mở hộp thoại

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức mở

1

$( ".selector" ).dialog({
  autoOpen: false
});

tùy chọn( optionName ) Trả về.

Nhận giá trị hiện được liên kết với

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Ghi chú. Đối với các tùy chọn có đối tượng làm giá trị của chúng, bạn có thể lấy giá trị của một khóa cụ thể bằng cách sử dụng ký hiệu dấu chấm. Ví dụ:

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

• tùy chọnName

  Loại.

  Tên của tùy chọn để có được

Ví dụ về mã

Gọi phương thức

1

$( ".selector" ).dialog({
  autoOpen: false
});

option() Trả về.

Nhận một đối tượng chứa các cặp khóa/giá trị đại diện cho hàm băm tùy chọn hộp thoại hiện tại

• Chữ ký này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức

1

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

tùy chọn( optionName, value ) Trả về. (chỉ phần bổ trợ)

Đặt giá trị của tùy chọn hộp thoại được liên kết với

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

Ghi chú. Đối với các tùy chọn có các đối tượng làm giá trị của chúng, bạn có thể đặt giá trị của chỉ một thuộc tính bằng cách sử dụng ký hiệu dấu chấm cho

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

• tùy chọnName

  Loại.

  Tên của tùy chọn để thiết lập

• giá trị

  Loại.

  Một giá trị để thiết lập cho các tùy chọn

Ví dụ về mã

Gọi phương thức

1

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

tùy chọn( tùy chọn ) Trả về. (chỉ phần bổ trợ)

Đặt một hoặc nhiều tùy chọn cho hộp thoại

• tùy chọn

  Loại.

  Bản đồ các cặp giá trị tùy chọn cần đặt

Ví dụ về mã

Gọi phương thức

1

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

widget() Trả về.

Trả về một đối tượng

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

• Phương pháp này không chấp nhận bất kỳ đối số

Ví dụ về mã

Gọi phương thức widget

1

// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

Điểm mở rộng

Tiện ích hộp thoại được xây dựng với nhà máy sản xuất phụ tùng và có thể được mở rộng. Khi mở rộng các tiện ích, bạn có khả năng ghi đè hoặc thêm vào hành vi của các phương thức hiện có. Các phương pháp sau đây được cung cấp dưới dạng các điểm mở rộng có cùng độ ổn định API như được liệt kê ở trên. Để biết thêm thông tin về tiện ích mở rộng tiện ích, hãy xem Mở rộng tiện ích bằng Widget Factory

_allowInteraction( sự kiện ) Trả về.

Hộp thoại phương thức không cho phép người dùng tương tác với các thành phần đằng sau hộp thoại. Điều này có thể gây rắc rối cho các phần tử không phải là phần tử con của hộp thoại, nhưng được định vị tuyệt đối để xuất hiện như thể chúng là phần tử con của hộp thoại. Phương thức

$( ".selector" ).dialog({
  appendTo: "#someElem"
});

• biến cố

  Loại.

Ví dụ về mã

Cho phép sử dụng plugin Select2 trong hộp thoại phương thức. Cuộc gọi đảm bảo các thành phần trong hộp thoại vẫn có thể được tương tác với

Làm cách nào để đóng Hộp thoại jQuery?

Làm cách nào để đóng nút trong jQuery?