Bạn biết làm thế nào có các hộp thoại JavaScript để cảnh báo, xác nhận và nhắc nhở hành động của người dùng?
Hãy để tôi giải thích
Gần đây tôi đã làm việc trên một dự án có rất nhiều lệnh gọi API và phản hồi của người dùng được thu thập bằng hộp thoại JavaScript. Trong khi tôi đang đợi một nhà phát triển khác viết mã thành phần
init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}const deleteLocation = confirm['Delete location'];
if [deleteLocation] {
alert['Location deleted'];
}Sau đó, nó đánh tôi. bạn nhận được rất nhiều tính năng liên quan đến phương thức miễn phí với
- Đó là một phương thức thực sự. Như trong, nó sẽ luôn ở trên cùng của ngăn xếp — thậm chí ở trên cùng của
6 với
7 - Nó có thể truy cập bằng bàn phím. Nhấn
8 để chấp nhận và
9 để hủy bỏ - Nó thân thiện với trình đọc màn hình. Nó di chuyển tiêu điểm và cho phép đọc to nội dung phương thức
- Nó bẫy tập trung. Nhấn
0 sẽ không đến được bất kỳ thành phần có thể đặt tiêu điểm nào trên trang chính, nhưng trong Firefox và Safari, nó thực sự di chuyển tiêu điểm đến giao diện người dùng của trình duyệt. Tuy nhiên, điều kỳ lạ là bạn không thể di chuyển tiêu điểm đến các nút “chấp nhận” hoặc “hủy” trong bất kỳ trình duyệt nào bằng cách sử dụng phímthis.elements = {} this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
0this.elements = {} this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el] - Nó hỗ trợ tùy chọn người dùng. Chúng tôi nhận được hỗ trợ chế độ sáng và tối tự động ngay lập tức
- Nó tạm dừng thực thi mã. , Ngoài ra, nó chờ đầu vào của người dùng
Ba phương thức JavaScript này hoạt động 99% khi tôi cần bất kỳ chức năng nào trong số này. Vậy tại sao tôi - hoặc bất kỳ nhà phát triển web nào khác - không sử dụng chúng? . Một cân nhắc lớn khác. đã có phong trào hướng tới sự phản đối của họ. Lần đầu tiên xóa khỏi iframe tên miền chéo và, từ đó, hoàn toàn khỏi nền tảng web, mặc dù nó cũng có kế hoạch cho việc đó đang bị tạm dừng
Với sự cân nhắc lớn đó, chúng ta phải thay thế các phương án thay thế
Không thể thay thế hoàn toàn các hộp thoại Javascript bằng chức năng giống hệt nhau, nhưng nếu chúng ta sử dụng phương pháp
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]Nếu bạn muốn xem bản demo ngay lập tức, nó ở đây
Một lớp hộp thoại
Trước tiên, chúng tôi cần một JavaScript cơ bản
this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Các cài đặt là
4. Đây là nhãn của nút “Chấp nhận”this.dialog.setAttribute['aria-labelledby', this.elements.message.id]
5. Đây là một lớp CSS được thêm vào phần tửthis.dialog.setAttribute['aria-labelledby', this.elements.message.id]
6 khi hộp thoại làthis.dialog.setAttribute['aria-labelledby', this.elements.message.id]
7 vàthis.dialog.setAttribute['aria-labelledby', this.elements.message.id]
5 không được trình duyệt hỗ trợthis.elements = {} this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
9. Đây là nhãn của nút “Hủy”this.dialog.setAttribute['aria-labelledby', this.elements.message.id]
0. Đây là lớp CSS tùy chỉnh được thêm vào phần tửthis.elements.cancel.addEventListener['click', [] => { this.dialog.dispatchEvent[new Event['cancel']] }]
5this.elements = {} this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
2. Đây là nội dung bên trongthis.elements.cancel.addEventListener['click', [] => { this.dialog.dispatchEvent[new Event['cancel']] }]
5this.elements = {} this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
4. Đây là URL của tệp âm thanh mà chúng tôi sẽ phát khi người dùng nhấn nút “Chấp nhận”this.elements.cancel.addEventListener['click', [] => { this.dialog.dispatchEvent[new Event['cancel']] }]
5. Đây là URL của tệp âm thanh mà chúng tôi sẽ phát khi người dùng mở hộp thoạithis.elements.cancel.addEventListener['click', [] => { this.dialog.dispatchEvent[new Event['cancel']] }]
6. Đây là một mẫu HTML nhỏ, tùy chọn được đưa vàothis.elements.cancel.addEventListener['click', [] => { this.dialog.dispatchEvent[new Event['cancel']] }]
5this.elements = {} this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
Mẫu ban đầu để thay thế hộp thoại JavaScript
Trong phương pháp
this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Kiểm tra hỗ trợ
Con đường để các trình duyệt hỗ trợ
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]Tham chiếu nút DOM
Bạn có nhận thấy tất cả các thuộc tính
toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]Cho đến nay,
toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]Thuộc tính nút
Đối với trình đọc màn hình, chúng tôi cần một thuộc tính
toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]Đó là
toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]Nút “Hủy”
Tin tốt. Phần tử hộp thoại HTML có một phương thức
getFocusable[] {
return [...this.dialog.querySelectorAll['button,[href],select,textarea,input:not[[type="hidden"]],[tabindex]:not[[tabindex="-1"]]']]
}this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]Đó là khuôn khổ để
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]Polyfilling các trình duyệt không được hỗ trợ
Chúng ta cần ẩn phần tử hộp thoại HTML đối với những trình duyệt không hỗ trợ. Để làm điều đó, chúng ta sẽ gói logic để hiển thị và ẩn hộp thoại trong một phương thức mới,
getFocusable[] {
return [...this.dialog.querySelectorAll['button,[href],select,textarea,input:not[[type="hidden"]],[tabindex]:not[[tabindex="-1"]]']]
}toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]điều hướng bàn phím
Tiếp theo, hãy thực hiện một cách bẫy tiêu điểm để người dùng có thể tab giữa các nút trong hộp thoại mà không vô tình thoát khỏi hộp thoại. Có rất nhiều cách để làm điều này. Tôi thích cách CSS, nhưng thật không may, nó không đáng tin cậy. Thay vào đó, hãy lấy tất cả các yếu tố có thể đặt tiêu điểm từ hộp thoại dưới dạng
getFocusable[] {
return [...this.dialog.querySelectorAll['button,[href],select,textarea,input:not[[type="hidden"]],[tabindex]:not[[tabindex="-1"]]']]
}getFocusable[] {
return [...this.dialog.querySelectorAll['button,[href],select,textarea,input:not[[type="hidden"]],[tabindex]:not[[tabindex="-1"]]']]
}getFocusable[] {
return [...this.dialog.querySelectorAll['button,[href],select,textarea,input:not[[type="hidden"]],[tabindex]:not[[tabindex="-1"]]']]
}Tiếp theo, chúng tôi sẽ thêm trình xử lý sự kiện
this.dialog.addEventListener['keydown', e => {
if [e.key === 'Enter'] {
if [!this.dialogSupported] e.preventDefault[]
this.elements.accept.dispatchEvent[new Event['click']]
}
if [e.key === 'Escape'] this.dialog.dispatchEvent[new Event['cancel']]
if [e.key === 'Tab'] {
e.preventDefault[]
const len = this.focusable.length - 1;
let index = this.focusable.indexOf[e.target];
index = e.shiftKey ? index-1 : index+1;
if [index < 0] index = len;
if [index > len] index = 0;
this.focusable[index].focus[];
}
}]this.dialog.addEventListener['keydown', e => {
if [e.key === 'Enter'] {
if [!this.dialogSupported] e.preventDefault[]
this.elements.accept.dispatchEvent[new Event['click']]
}
if [e.key === 'Escape'] this.dialog.dispatchEvent[new Event['cancel']]
if [e.key === 'Tab'] {
e.preventDefault[]
const len = this.focusable.length - 1;
let index = this.focusable.indexOf[e.target];
index = e.shiftKey ? index-1 : index+1;
if [index < 0] index = len;
if [index > len] index = 0;
this.focusable[index].focus[];
}
}]Đối với Enter, chúng tôi cần ngăn
this.dialog.addEventListener['keydown', e => {
if [e.key === 'Enter'] {
if [!this.dialogSupported] e.preventDefault[]
this.elements.accept.dispatchEvent[new Event['click']]
}
if [e.key === 'Escape'] this.dialog.dispatchEvent[new Event['cancel']]
if [e.key === 'Tab'] {
e.preventDefault[]
const len = this.focusable.length - 1;
let index = this.focusable.indexOf[e.target];
index = e.shiftKey ? index-1 : index+1;
if [index < 0] index = len;
if [index > len] index = 0;
this.focusable[index].focus[];
}
}]this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]getFocusable[] {
return [...this.dialog.querySelectorAll['button,[href],select,textarea,input:not[[type="hidden"]],[tabindex]:not[[tabindex="-1"]]']]
}Hiển thị this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
5
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]Bây giờ hãy hiển thị hộp thoại. Đối với điều này, chúng ta cần một phương thức nhỏ kết hợp một đối tượng tùy chọn
this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Phù. Đó là rất nhiều mã. Bây giờ chúng ta có thể hiển thị phần tử
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Phương thức này trả về một
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Chúng tôi có thể xóa trình lắng nghe sự kiện ngay lập tức bằng cách sử dụng
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Để đơn giản, tôi không sử dụng
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Ẩn this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]
5
this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]Trước đó, chúng tôi đã thêm trình xử lý sự kiện cho sự kiện
this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}
18 ở đâu?
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Trong phương pháp
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Nhưng điều này có đúng không? . Tuy nhiên, trong ví dụ của Scott Ohara, trọng tâm là chính hộp thoại — điều này hợp lý nếu trình đọc màn hình nên đọc văn bản mà chúng ta đã xác định trong thuộc tính
toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Sau đó, trong phương pháp
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Chúng ta có thể kiểm tra
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Thêm cảnh báo, xác nhận và nhắc nhở
Cuối cùng, chúng tôi đã sẵn sàng để thêm
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}this.dialog.setAttribute['aria-labelledby', this.elements.message.id]Hãy so sánh với cú pháp ban đầu
0 thường được kích hoạt như thế này
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Trong Hộp thoại của chúng tôi, chúng tôi sẽ thêm một phương thức
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Chúng tôi đặt
this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]
1 thường được kích hoạt như thế này
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}Trong phiên bản của chúng tôi, tương tự như
this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}
2 thường được kích hoạt như thế này
init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Ở đây, chúng ta cần thêm một
this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}this.elements = {}
this.dialog.querySelectorAll['[data-ref]'].forEach[el => this.elements[el.dataset.ref] = el]Chúng ta nên kiểm tra điều này
Đã đến lúc kiểm tra và đảm bảo mọi thứ hoạt động như mong đợi. Hãy tạo một tệp HTML mới, nhập lớp và tạo một thể hiện
init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Thử lần lượt các trường hợp sử dụng sau
init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Sau đó xem bảng điều khiển khi bạn nhấp vào “Chấp nhận” hoặc “Hủy. ” Thay vào đó, hãy thử lại trong khi nhấn phím Escape hoặc Enter
Không đồng bộ/Đang chờ
Chúng ta cũng có thể sử dụng cách
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Kiểu dáng trình duyệt chéo
Giờ đây, chúng tôi có một phần tử hộp thoại HTML thân thiện với trình duyệt chéo và trình đọc màn hình đầy đủ chức năng thay thế các hộp thoại JavaScript. Chúng tôi đã bảo hiểm rất nhiều. Nhưng kiểu dáng có thể sử dụng rất nhiều tình yêu. Hãy sử dụng các thuộc tính
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}toggle[open = false] {
if [this.dialogSupported && open] this.dialog.showModal[]
if [!this.dialogSupported] {
document.body.classList.toggle[this.settings.bodyClass, open]
this.dialog.hidden = !open
/* If a `target` exists, set focus on it when closing */
if [this.elements.target && !open] {
this.elements.target.focus[]
}
}
}
/* Then call it at the end of `init`: */
this.toggle[]Chúng tôi sẽ sử dụng bộ chọn giả CSS
export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Tất nhiên, bạn có thể tạo kiểu cho chúng theo ý muốn. Đây là những gì CSS trên sẽ cung cấp cho bạn
Để ghi đè lên các kiểu này và sử dụng kiểu của riêng bạn, hãy thêm một lớp vào
this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}…sau đó thêm lớp trong CSS và cập nhật các giá trị thuộc tính tùy chỉnh của CSS
init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Một ví dụ về hộp thoại tùy chỉnh
Điều gì sẽ xảy ra nếu các phương pháp
Trước đó, tôi đã đề xuất ý tưởng thêm âm thanh vào hộp thoại. Hãy làm điều đó
Bạn có thể sử dụng thuộc tính
this.elements.cancel.addEventListener['click', [] => {
this.dialog.dispatchEvent[new Event['cancel']]
}]this.dialog.setAttribute['aria-labelledby', this.elements.message.id]export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}export default class Dialog {
constructor[settings = {}] {
this.settings = Object.assign[
{
/* DEFAULT SETTINGS - see description below */
},
settings
]
this.init[]
}init[] {
// Testing for support
this.dialogSupported = typeof HTMLDialogElement === 'function'
this.dialog = document.createElement['dialog']
this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
this.dialog.role = 'dialog'
// HTML template
this.dialog.innerHTML = `
`
document.body.appendChild[this.dialog]
// ...
}Bản thử trực tiếp
Đây là một cây bút với mọi thứ chúng tôi đã xây dựng. Mở bảng điều khiển, nhấp vào các nút và khám phá các hộp thoại, nhấp vào các nút và sử dụng bàn phím để chấp nhận và hủy bỏ
Dự phòng nhúng CodePen
Vậy bạn nghĩ như thế nào?
Làm cách nào để tùy chỉnh hộp nhắc trong JavaScript?
Tạo hộp thoại nhắc. Lời nhắc mới [{ tiêu đề. 'Tiêu đề gợi ý', nội dung. 'Thông báo Nhắc', văn bản giữ chỗ. sai, // văn bản giữ chỗ tùy chỉnh. sai, // văn bản gửi tùy chỉnh onSubmit[thành phần, giá trị] { console. nhật ký [giá trị] } }];
Làm cách nào để thêm hộp thoại trong JavaScript?
Bạn có thể tạo hộp thoại nhắc nhở bằng phương thức prompt[] . Phương thức này trả về văn bản đã nhập trong trường nhập liệu khi người dùng nhấp vào nút OK và trả về giá trị rỗng nếu người dùng nhấp vào nút Hủy. Nếu người dùng nhấp vào nút OK mà không nhập bất kỳ văn bản nào, một chuỗi trống sẽ được trả về.
Làm cách nào để nhắc đầu vào của người dùng trong JavaScript?
Trong JavaScript, chúng tôi sử dụng hàm prompt[] để yêu cầu người dùng nhập dữ liệu . Là một tham số, chúng tôi nhập văn bản mà chúng tôi muốn hiển thị cho người dùng. Sau khi người dùng nhấn “ok”, giá trị đầu vào được trả về. Chúng tôi thường lưu trữ đầu vào của người dùng trong một biến để chúng tôi có thể sử dụng thông tin trong chương trình của mình.
Làm cách nào để xác định lời nhắc trong JavaScript?
Định nghĩa và cách sử dụng
. Phương thức prompt[] trả về giá trị đầu vào nếu người dùng bấm "OK", ngược lại trả về null. The prompt[] method displays a dialog box that prompts the user for input. The prompt[] method returns the input value if the user clicks "OK", otherwise it returns null .