programming javascript

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="//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 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
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ố


    
    Customized alert box with jQueryUI
    
    
    
    
        $[function[] {
            $["#jquery-ui-dialog"].dialog[];
        }];
    


    
        

            
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

Tạo hộp thông báo tùy chỉnh với SweetAlert2

SweetAlert2 cho phép bạn tạo hộp cảnh báo có thể truy cập, tùy chỉnh và đáp ứng. Nó nhằm mục đích thay thế các hộp bật lên JavaScript, bao gồm cả hàm alert[] JavaScript gốc

Bạn có thể sử dụng SweetAlert2 theo nhiều cách khác nhau trong dự án của mình. Tuy nhiên, đối với bài viết này, chúng tôi sẽ sử dụng nó với thẻ 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
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 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
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 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
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à 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
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 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
4 với các đối số hiển thị cảnh báo tùy chỉnh

Mã số


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];

đầu ra

Tạo hộp cảnh báo tùy chỉnh với chức năng tùy chỉnh

Bạn có thể tạo một chức năng tùy chỉnh sẽ thay thế hộp alert[] gốc trong trình duyệt web của người dùng. Bạn sẽ làm điều này từ đối tượng 


    
    Customized alert box with SweetAlert2
    
    
    
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    


    
        Click Me
    


    $["#showAlert"].click[function[]{
        Swal.fire[
            'Are you done?',
        ]
    }];
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à 
    
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

    function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

    0 không. Nếu đúng, dừng tạo cảnh báo tùy chỉnh
  3. Tạo phần tử div cho vùng chứa cảnh báo và nối nó vào phần tử body. Sau đó, làm như sau
    • Cung cấp cho vùng chứa cảnh báo ID HTML
    • Đặt cho vùng chứa cảnh báo một tên lớp HTML
  4. Tạo phần tử div cho hộp cảnh báo và nối nó vào vùng chứa cảnh báo. Sau đó, đặt cho nó một tên lớp HTML
  5. Đặt vị trí trên cùng của hộp cảnh báo bằng cách sử dụng 
    
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

    function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

    1
  6. Đặt vị trí bên trái của hộp cảnh báo bằng cách sử dụng 
    
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

    function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

    2 và 
    
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

    function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

    3
  7. Tạo một phần tử HTML 
    
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

    function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

    4 cho tiêu đề cảnh báo. Sau đó làm như sau
    • Tạo một nút văn bản cho tiêu đề cảnh báo. Giá trị của nó phải là hằng số tiêu đề cảnh báo
    • Nối 
      
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

      function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

      4 vào hộp cảnh báo
    • Nối nút văn bản vào tiêu đề cảnh báo
  8. Tạo phần tử HTML 
    
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

    function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

    6. Sau đó làm như sau
    • Tạo một nút văn bản cho văn bản nút. Giá trị của nó phải là hằng số tiêu đề cảnh báo
    • Nối văn bản nút vào phần tử 
      
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

      function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

      6
    • Nối phần tử 
      
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

      function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

      6 vào hộp cảnh báo
    • Gán cho phần tử 
      
    


    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if [document.getElementById] {
        // Swap the native alert for the custom
        // alert
        window.alert = function [alert_message] {
            custom_alert[alert_message];
        }
    }

      function custom_alert[alert_message] {

    /* You can utilize the web page address
     * for the alert message by doing the following:

     const ALERT_TITLE = "The page at " + document.location.href + " says: ";
     */
    const ALERT_TITLE = "Alert Message";
    const ALERT_BUTTON_TEXT = "OK";

    // Check if there is an HTML element with
    // an ID of "alert_container".If true, abort
    // the creation of the custom alert.
    let is_alert_container_exist = document.getElementById["alert_container"];
    if [is_alert_container_exist] {
        return;
    }

    // Create a div to serve as the alert
    // container. Afterward, attach it to the body
    // element.
    let get_body_element = document.querySelector["body"];
    let div_for_alert_container = document.createElement["div"];
    let alert_container = get_body_element.appendChild[div_for_alert_container];

    // Add an HTML ID and a class name for the
    // alert container
    alert_container.id = "alert_container";
    alert_container.className = "alert_container"

    // Create the div for the alert_box and attach
    // it to the alert container.
    let div_for_alert_box = document.createElement["div"]
    let alert_box = alert_container.appendChild[div_for_alert_box];
    alert_box.className = "alert_box";

    // Set the position of the alert box using
    // scrollTop, scrollWidth, and offsetWidth
    alert_box.style.top = document.documentElement.scrollTop + "px";
    alert_box.style.left = [document.documentElement.scrollWidth - alert_box.offsetWidth] / 2 + "px";

    // Create h1 to hold the alert title
    let alert_header_tag = document.createElement["h1"];
    let alert_title_text = document.createTextNode[ALERT_TITLE]
    let alert_title= alert_box.appendChild[alert_header_tag];
    alert_title.appendChild[alert_title_text];

    // Create a paragraph element to hold the
    // alert message
    let alert_paragraph_tag = document.createElement["p"];
    let alert_message_container = alert_box.appendChild[alert_paragraph_tag];
    alert_message_container.textContent = alert_message;

    // Create the OK button
    let ok_button_tag = document.createElement["button"];
    let ok_button_text = document.createTextNode[ALERT_BUTTON_TEXT]
    let ok_button = alert_box.appendChild[ok_button_tag];
    ok_button.className = "close_btn";
    ok_button.appendChild[ok_button_text];

    // Add an event listener that'll close the
    // custom alert
    ok_button.addEventListener["click", function [] {
        remove_custom_alert[];
    }, false];
}

function remove_custom_alert[] {
    let HTML_body = document.querySelector["body"];
    let alert_container = document.getElementById["alert_container"];
    HTML_body.removeChild[alert_container];
}

      6 một tên lớp duy nhất
    • Đính kèm trình xử lý sự kiện vào nút. Người nghe sự kiện phải đóng hộp cảnh báo tùy chỉnh

Ngoài ra, bạn nên tạo một chức năng sẽ xóa cảnh báo tùy chỉnh. Điều này sẽ xảy ra khi người dùng nhấp vào nút 

.alert_container {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background-color: #0000004d;

}

.alert_box {

position: relative;

width: 300px;

min-height: 100px;

margin-top: 50px;

border: 1px solid #666;

background-color: #fff;

}


.alert_box h1 {

font-size: 0.9em;

margin: 0;

background-color: #1560bd;

color: #fff;

border-bottom: 1px solid #000;

padding: 2px 0 2px 5px;

}


.alert_box p {

font-size: 0.7em;

height: 50px;

margin-left: 55px;

padding-left: 5px;

}


.close_btn {

width: 70px;

font-size: 0.7em;

display: block;

margin: 5px auto;

padding: 7px;

border: 0;

color: #fff;

background-color: #1560bd;

border-radius: 3px;

cursor: pointer;

}
0

Chức năng nên sử dụng các bước sau

  1. Lấy phần tử HTML 
    .alert_container {
    
position: absolute;
    
top: 0px;
    
left: 0px;
    
width: 100%;
    
height: 100%;
    
background-color: #0000004d;
    
}

    .alert_box {
    
position: relative;
    
width: 300px;
    
min-height: 100px;
    
margin-top: 50px;
    
border: 1px solid #666;
    
background-color: #fff;
    
}
    

    .alert_box h1 {
    
font-size: 0.9em;
    
margin: 0;
    
background-color: #1560bd;
    
color: #fff;
    
border-bottom: 1px solid #000;
    
padding: 2px 0 2px 5px;
    
}
    

    .alert_box p {
    
font-size: 0.7em;
    
height: 50px;
    
margin-left: 55px;
    
padding-left: 5px;
    
}
    

    .close_btn {
    
width: 70px;
    
font-size: 0.7em;
    
display: block;
    
margin: 5px auto;
    
padding: 7px;
    
border: 0;
    
color: #fff;
    
background-color: #1560bd;
    
border-radius: 3px;
    
cursor: pointer;
    
}
    1
  2. Nhận vùng chứa cảnh báo
  3. Sử dụng phương pháp 
    .alert_container {
    
position: absolute;
    
top: 0px;
    
left: 0px;
    
width: 100%;
    
height: 100%;
    
background-color: #0000004d;
    
}

    .alert_box {
    
position: relative;
    
width: 300px;
    
min-height: 100px;
    
margin-top: 50px;
    
border: 1px solid #666;
    
background-color: #fff;
    
}
    

    .alert_box h1 {
    
font-size: 0.9em;
    
margin: 0;
    
background-color: #1560bd;
    
color: #fff;
    
border-bottom: 1px solid #000;
    
padding: 2px 0 2px 5px;
    
}
    

    .alert_box p {
    
font-size: 0.7em;
    
height: 50px;
    
margin-left: 55px;
    
padding-left: 5px;
    
}
    

    .close_btn {
    
width: 70px;
    
font-size: 0.7em;
    
display: block;
    
margin: 5px auto;
    
padding: 7px;
    
border: 0;
    
color: #fff;
    
background-color: #1560bd;
    
border-radius: 3px;
    
cursor: pointer;
    
}
    2 để xóa vùng chứa cảnh báo khỏi phần tử HTML 
    .alert_container {
    
position: absolute;
    
top: 0px;
    
left: 0px;
    
width: 100%;
    
height: 100%;
    
background-color: #0000004d;
    
}

    .alert_box {
    
position: relative;
    
width: 300px;
    
min-height: 100px;
    
margin-top: 50px;
    
border: 1px solid #666;
    
background-color: #fff;
    
}
    

    .alert_box h1 {
    
font-size: 0.9em;
    
margin: 0;
    
background-color: #1560bd;
    
color: #fff;
    
border-bottom: 1px solid #000;
    
padding: 2px 0 2px 5px;
    
}
    

    .alert_box p {
    
font-size: 0.7em;
    
height: 50px;
    
margin-left: 55px;
    
padding-left: 5px;
    
}
    

    .close_btn {
    
width: 70px;
    
font-size: 0.7em;
    
display: block;
    
margin: 5px auto;
    
padding: 7px;
    
border: 0;
    
color: #fff;
    
background-color: #1560bd;
    
border-radius: 3px;
    
cursor: pointer;
    
}
    1

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 đó.

Bài Viết Liên Quan

Ví dụ về chữ trong Python là gì?
Phân tích chuỗi giữa hai dấu phân cách C++
Truy vấn hộp tìm kiếm trong php
Gỡ lỗi PHP trong bảng điều khiển Chrome
Cách hiển thị dữ liệu cụ thể từ cơ sở dữ liệu trong PHP
Làm cách nào để tìm phần cuối của chuỗi trong PHP?
24/11 âm là bao nhiêu dương 2023
Cách bật javascript trên samsung
Làm cách nào để lưu trữ dữ liệu biểu mẫu HTML trong đối tượng JSON?
Thông số kỹ thuật Toyota Sequoia 2023 Edmunds
Du thuyền từ Rome 2023
Thêm vào danh sách trong vòng lặp for python
Làm cách nào để tải ứng dụng đa ngôn ngữ?
Chức năng nào được sử dụng để nối tệp trong PHP?
Làm cách nào để nhận giá trị sau trong JavaScript?
Làm thế nào để bạn hủy kích hoạt plugin?
JavaScript nhân hai trường đầu vào
1 hử yến chưng bao nhiêu ml?
Giải vô địch khúc côn cầu nam thế giới năm 2023 sẽ được tổ chức?
Is_page wordpress không hoạt động

Toplist mới

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Bài mới nhất

Banner cỡ lớn treo ngoài đường tiếng anh là gì năm 2024
Top hãng mặt nạ nội địa trung quốc năm 2024
Giải hóa 8 bài nồng độ dung dịch năm 2024
Cường hóa lên thẳng 15 trong nháy mắt năm 2024
Phòng khám trung nguyện ở bình đại bến tre năm 2024
Cải lương chi bảo là gì năm 2024
Bài tập hỗn hợp kim loại tác dụng với hno3 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Bài Tập Địa Điểm Hay Mẹo Hay Học Tốt Nghĩa của từ Công Nghệ Khỏe Đẹp bao nhiêu Top List Tiếng anh Bao nhiêu Sản phẩm tốt Xây Đựng Ngôn ngữ javascript Ở đâu Đại học Hướng dẫn Bài tập Tại sao Dịch So Sánh Máy tính Món Ngon Bao lâu mẹo hay Thế nào So sánh Khoa Học Vì sao Lớp 9 Lớp 10