Làm cách nào để tạo hộp cảnh báo tùy chỉnh trong JavaScript?
Ngày đăng:29/01/2023
Trả lời:0
Lượt xem:188
Lựa chọn 2. bạn start up hoặc mới tham gia dự án dựa trên ứng dụng web thì thiết kế giao diện có lẽ tốt. Nếu không thì điều này nên được thay đổi. Để vào Web 2. 0 ứng dụng bạn sẽ làm việc với nội dung động, nhiều hiệu ứng và những thứ khác. Tất cả những thứ này đều ổn, nhưng không ai nghĩ đến việc tạo kiểu cho các hộp xác nhận và cảnh báo JavaScript. Đây là cách của họ
" ); } document.write(""); function leftJsConfirm() { document.getElementById('jsconfirm').style.top=-1000; document.location.href=leftJsConfirmUri; } function rightJsConfirm() { document.getElementById('jsconfirm').style.top=-1000; document.location.href=rightJsConfirmUri; } function confirmAlternative() { if(confirm("Scipt requieres a better browser!")) document.location.href="http://www.mozilla.org"; } leftJsConfirmUri = ''; rightJsConfirmUri = ''; /** * Show the message/confirm box */ function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi) { document.getElementById("jsconfirmtitle").innerHTML=confirmtitle; document.getElementById("jsconfirmcontent").innerHTML=confirmcontent; document.getElementById("jsconfirmleft").value=confirmlefttext; document.getElementById("jsconfirmright").value=confirmrighttext; leftJsConfirmUri=confirmlefturi; rightJsConfirmUri=confirmrighturi; xConfirm=xConfirmStart, yConfirm=yConfirmStart; if(ie5) { document.getElementById("jsconfirm").style.left='25%'; document.getElementById("jsconfirm").style.top='35%'; } else if(nn6) { document.getElementById("jsconfirm").style.top='25%'; document.getElementById("jsconfirm").style.left='35%'; } else confirmAlternative(); }
Tạo tệp html đơn giản
jsConfirmSyle
JsConfirmStyled
standard
Bài viết này sẽ hướng dẫn bạn cách tạo hộp cảnh báo tùy chỉnh trong JavaScript bằng giao diện người dùng jQuery, SweetAlert2 và chức năng cảnh báo tùy chỉnh
Tạo hộp cảnh báo tùy chỉnh với giao diện người dùng jQuery
Bạn có thể sử dụng Giao diện người dùng jQuery để bắt chước chức năng của hàm alert() gốc JavaScript. Mặc dù Giao diện người dùng jQuery có rất nhiều API, nhưng bạn có thể sử dụng API dialog() của nó để tạo hộp cảnh báo tùy chỉnh
Trong khi đó, không giống như hàm alert() gốc của JavaScript, bạn có thể kéo hộp cảnh báo được tạo bằng API dialog()
Chúng tôi đã nhập jQuery, giao diện người dùng jQuery và các kiểu CSS cho giao diện người dùng jQuery vào mã của chúng tôi trong khối mã sau. Do đó, chúng tôi có thể sử dụng API dialog() để tạo hộp cảnh báo tùy chỉnh
Trong khi đó, API dialog() cần một vị trí trên trang web để hiển thị hộp cảnh báo tùy chỉnh. Vì vậy, chúng tôi sẽ sử dụng phần tử div HTML có ID duy nhất
0 chứa văn bản sẽ là tiêu đề của hộp cảnh báo tùy chỉnh. Khi bạn chạy mã trong trình duyệt web của mình, bạn sẽ thấy hộp cảnh báo tùy chỉnh được tạo bằng API dialog()
Mã số
You can move this dialog box, or close it with the 'X' sign at the top-right.
đầu ra
Modal Pop-up trong JavaScript với Sou
Vui lòng bật JavaScript
Modal Pop-up trong JavaScript với mã nguồn. Dự án JavaScript với mã nguồn
3 thông qua Mạng phân phối nội dung (CDN)
Do đó, khi SweetAlert2 tải xuống, bạn có thể sử dụng nó bằng cách đính kèm trình xử lý sự kiện vào nút HTML. Bạn có thể gọi phương thức
Cuối cùng, tạo các kiểu CSS để tạo kiểu cho chức năng cảnh báo tùy chỉnh. Trong các khối mã tiếp theo, bạn sẽ tìm thấy cách triển khai cho phần sau
Chúng tôi có thể tùy chỉnh hộp cảnh báo trong JavaScript không?
Cách tiếp cận để thiết kế hộp cảnh báo tùy chỉnh bằng JavaScript. Để tạo hộp cảnh báo tùy chỉnh, chúng tôi sẽ sử dụng thư viện jQuery được sử dụng để đơn giản hóa thao tác HTML DOM và nó cũng cung cấp cho chúng tôi cách sử dụng xử lý sự kiện và hoạt ảnh CSS tốt hơn với JavaScript
Làm cách nào để tùy chỉnh hộp cảnh báo bằng CSS?
Chúng tôi sẽ gán một lớp cho hộp cảnh báo, sau đó, chúng tôi thiết kế lớp cụ thể đó trong CSS . Trong ví dụ này, lớp là một thùng chứa. Để thiết kế button chúng ta sẽ sử dụng thẻ button trong CSS để thiết kế. Và các thông báo xuất hiện cũng có thể được trang trí như chúng ta đính kèm một lớp và cũng có thể thiết kế điều đó.
