Tạo hộp thoại trong html

Question

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Nội dung chính Show

1- Javascript Dialog Box
2- Alert Dialog Box
3- Confirmation Dialog Box
4- Prompt Dialog Box

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Javascript Dialog Box

Javascript cung cấp 3 loại hộp thoại (Dialog Box) quan trọng, chúng bao gồm, hộp thoại để hiển thị một cảnh báo (alert) cho người dùng, hộp thoại yêu cầu người dùng xác nhận một vấn đề gì đó, và hộp thoại yêu cầu người dùng nhập vào một thông tin.

Chú ý các hộp thoại được cung cấp bởi Javascript có giao diện rất đơn giản và không thể tùy biến, trong ứng dụng thực tế có thể bạn sẽ sử dụng một thư viên được cung cấp bởi bên thứ ba để có được các hộp thoại đẹp hơn và nhiều tùy chọn hơn. Tuy nhiên các hộp thoại mặc định của Javascript vẫn có ích trong rất nhiều trường hợp.

Trong bài học này chúng ta sẽ thảo luận lần lượt từng hộp thoại.

2- Alert Dialog Box

Alert Dialog Box chủ yếu được sử dụng để hiển thị một thông báo, cảnh báo, hoặc lỗi cho người dùng. Về cơ bản bạn không thể tùy biến biểu tượng (icon) hoặc tiêu đề của hộp thoại,... bạn chỉ có thể cung cấp thông điệp mà hộp thoại sẽ hiển thị. Ngoài ra Alert Dialog Box cũng chỉ có duy nhất một nút OK để đóng hộp thoại.

Để hiển thị Alert Dialog Box bạn gọi hàm alert(message), trong đó message là nội dung mà hộp thoại sẽ hiển thị.

alert-example.js


<!DOCTYPE html>
<html>
   <head>
      <title>Alert Dialog Box</title>

      <script type="text/javascript">

         function testAlertDialog()  {

              alert("Something Error!");
         }

      </script>

   </head>
   <body>
      <h2>Alert Dialog Box</h2>


      <button onclick="testAlertDialog()">Click me!</button>

   </body>
</html>

3- Confirmation Dialog Box

Confirmation Dialog Box (Hộp thoại xác nhận) được sử dụng để yêu cầu người dùng xác nhận một vấn đề gì đó. Hộp thoại này rất đơn giản, bạn không thể tùy biến các biểu tượng hoặc tiêu đề của hộp thoại, bạn chỉ có thể cung cấp một thông điệp yêu cầu người dùng xác nhận. Hộp thoại này có 2 nút OK và Cancel.

Để hiển thị Confirmation Dialog Box bạn gọi hàm confirm(message), trong đó message là thông điệp yêu cầu người dùng xác nhận. Nếu người dùng nhấn vào nút OK hàm này sẽ trả về true, ngược lại nếu người dùng nhấn vào nút No hàm này sẽ trả về false.

confirm-example.js


<!DOCTYPE html>
<html>
   <head>
      <title>Confirmation Dialog Box</title>

      <script type="text/javascript">

         function testConfirmDialog()  {

              var result = confirm("Do you want to continue?");

              if(result)  {
                  alert("OK Next lesson!");
              } else {
                  alert("Bye!");
              }
         }

      </script>

   </head>
   <body>
      <h2>Confirmation Dialog Box</h2>


      <button onclick="testConfirmDialog()">Click me!</button>

   </body>
</html>

4- Prompt Dialog Box

Prompt Dialog Box được sử dụng để người dùng nhập vào một thông tin. Hộp thoại này rất đơn giản, nó bao gồm một Text Field (Trường văn bản) để người dùng nhập vào thông tin. Hộp thoại có 2 nút OK và Cancel.

Để hiển thị Prompt Dialog Box bạn gọi hàm prompt(message, defaultValue). Trong đó message là thông điệp cho người dùng, defaultValue là giá trị mặc định được điền sẵn vào Text Field.

Nếu người dùng nhấn vào nút OK, hàm sẽ trả về nội dung trên Text Field, ngược lại nếu người dùng nhấn vào nút Cancel hàm sẽ trả về null.

prompt-example.js


<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>

      <script type="text/javascript">

         function testPromptDialog()  {

              var result = prompt("Enter you age:", "20");

              if(result != null)  {
                  alert("Your age is " + result);
              }
         }

      </script>

   </head>
   <body>
      <h2>Prompt Dialog Box</h2>


      <button onclick="testPromptDialog()">Click me!</button>

   </body>
</html>

programming html Figcaption trong HTML Dialog> HTML Popup trong HTML