Làm cách nào để tạo hộp cảnh báo tùy chỉnh trong JavaScript?

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ọ

tạo tên tệp js đơn giản jsConfirmStyle. js. Đây là mã js đơn giản

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

xConfirmStart=800;
yConfirmStart=100;

if(ie5||nn6) {
if(ie5) cs=2,th=30;
else cs=0,th=20;
document.write(
    "
"+
        ""+
            ""+
            ""+
            ""+
        ""+
                ""+
                "  "+
                ""+
            ""+
    "
"
);
 }

           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

Hơn nữa, div này phải có thuộc tính

    
    
    
    
    


    

        Click Me
    

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

Click Me

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

    
    
    
    
    


    

        Click Me
    

4 và cung cấp cho nó các đối số trong trình lắng nghe sự kiện

Đối số mà bạn cung cấp cho

    
    
    
    
    


    

        Click Me
    

4 xác định đầu ra của hộp cảnh báo tùy chỉnh

Chúng tôi đã đính kèm trình xử lý sự kiện vào nút HTML trong khối mã tiếp theo. Nút này có thuộc tính ID HTML là

    
    
    
    
    


    

        Click Me
    

6

Chúng tôi đã sử dụng jQuery để lấy ID để giúp mọi việc trở nên dễ dàng với bạn. Sau đó, chúng tôi gọi phương thức

    
    
    
    
    


    

        Click Me
    

4 với các đối số hiển thị cảnh báo tùy chỉnh

Mã số

    
    
    
    
    


    

        Click Me
    

đầu ra

Click Me

9 và chức năng tùy chỉnh sẽ hoạt động như vậy

1. Đặt hằng số cho tiêu đề cảnh báo và văn bản nút cảnh báo
2. Kiểm tra xem HTML có ID là