Hướng dẫn javascript hiển thị popup
Popup (bật lên) là một trong những chức năng thường thấy ở hầu hết các website. Chẳng hạn như các trang web dịch vụ, bán hàng bạn sẽ thấy các Popup hiển thị Form liên hệ, đăng ký, đăng nhập vv… Thật may mắn khi các trình duyệt đều hỗ trợ ngôn ngữ JavaScript. Bài viết này bạn sẽ được hướng dẫn cách tạo một Popup bằng JavaScript khi click với code đơn giản. Để thực hành code bạn có thể sử dụng https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
https://codepen.io/pen/ Bước 1: Tạo một button liên hệ Bạn cần tư vấn hãy liên hệ với chúng tôi Bước 2: Viết CSS Giải thích: Bước 3: Thêm JavaScript để lắng nghe sự kiện click chuột Giải thích: Tạo Popup để bật lên một cửa sổ khá đơn giản phải không nào. JavaScript có ứng dụng khá rộng rãi khi dùng để tương tác với người dùng trên trình duyệt. Chắc chắn bạn sẽ làm được rất nhiều thứ khi làm chủ nó.
Popup là một phương thức rất kinh điển để hiển thị các thông tin nâng cao cho người dùng. Theo thời gian, popup cũng phát triển và ngày càng hoạt động phức tạp hơn. Trong bài viết này, chúng ta sẽ tìm hiểu về cách thức sử dụng popup bằng JavaScript. Sử dụng cơ bảnVới lịch sử lâu đời, việc mở một popup mới bằng JavaScript là một công việc hết sức đơn giản:
Và trình duyệt sẽ mở một tab mới với URL được chỉ định. Trước đây, các trình duyệt sẽ mở URL ở một cửa sổ mới, do đó, cửa sổ này mới được gọi là popup. Ngày ngày, hầu hết các trình duyệt hiện đại đều sử dụng tab mới thay cho cửa sổ mới nhưng thuật ngữ "popup" vẫn tiếp tục được sử dụng (có lẽ do mọi người đã quá quen rồi). Sử dụng nâng caoHiện nay, chúng ta có nhiều cách để load và hiển thị dữ liệu bằng JavaScript, thế nhưng popup với lịch sử lâu đời của nó vẫn cứ tiếp tục được sử dụng. Bởi đơn giản, popup có những tình huống là lựa chọn tốt nhất. Ví dụ, nhiều shop bán hàng online thường có một khung chat để hỗ trợ khách hàng. Trong trường hợp này, khi khách hàng click thì mở một popup để chat sẽ tốt hơn là bật một khung chat nho nhỏ. Đây hoàn toàn là ý kiến cá nhân, dựa trên một số điểm như sau: Một popup chat riêng độc lập với trang chính sẽ giúp trang chính (dùng để bán hàng) nhẹ hơn, hoạt động tốt hơn. Mà riêng lĩnh vực này, trải nghiệm người dùng là cực kỳ quan trọng. Một popup thì dễ dàng gắn vào trang hơn, chỉ cần 1 button là đủ, không cần nhiều xử lý liên quan. Điều này cũng giúp các lập trình viên web bán hàng dễ dàng hơn trong công việc của họ. Một điểm quan trọng nữa là, popup không bị đóng sau khi trang web bán hàng được đóng lại. Điều này giúp các trang bán hàng "níu kéo" khách hàng tốt hơn. Phương thức window.openNhư phân trước đã đề cập, chúng ta có thể mở một popup rất dễ dàng với một URL được truyền vào. Thế nhưng, thực tế, phương thức
Thông tin cụ thể về các tham số như sau:
Một số cấu hình chúng ta có thể sử dụng trong
Có nhiều thông số khác nhau nữa, nhưng chúng cũng ít được sử dụng trong thực tên, nên nội dung bài viết này tôi không đề cập đến. Để xem chi tiết về toàn bộ thông số, mời các bạn tham khảo thêm ở đây. Mở một cửa sổ tối giảnDưới đây là một cách thức để mở một cửa sổ popup tối giản nhất:
Như chúng ta có thể thấy, phần lớn các thành phần cửa sổ đều bị ẩnh đi, cùng với việc chỉ định kích thước, vị trí của cửa sổ. Sau khi thực hiện, chúng ta sẽ có một cửa sổ popup như dưới đây. Trong trường hợp phương
thức
Truy cập một popup đang mởChúng ta vẫn có thể truy cập
được một popup đang mở, ngay cả khi nó là một trang web hoàn toàn riêng biệt. Đó là bởi vì phương thức Trong ví dụ dưới đây, chúng ta có thể dùng cách này để truy cập và thay đổi nội dung của cửa sổ popup sau khi load:
Kết quả chúng ta đã thay đổi được nội dung hiển thị trong popup Cần lưu ý một điều rằng, chúng ta chỉ có thể dùng cách này để thao tác với nội dung hiển thị trong popup nếu URL được mở ra trong popup đó có cùng nguồn gốc với trang hiện tại (cùng protocol, domain, port). Với popup đang mở cácn URL khác nguồn gốc, chúng ta có thể thay đổi URL của nó (bằng cách Thử tưởng tượng một trang web sử dụng popup để mở gmail của bạn chẳng hạn, nếu nó có thể truy cập vào nội dung được hiển thị thì khác nào đọc được toàn bộ nội dung thư của chúng ta. Đóng một popupNếu chúng ta không có nhu cầu dùng đến popup nữa, chúng ta có thể chủ động đóng nó lại (thông qua đối tượng như ở phần trên). Về mặt kỹ thuật, chúng ta chỉ cần gọi phương thức Chúng ta có thể sử dụng thuộc tính Đoạn code dưới đây sẽ mở ra một popup sau đó đóng nó lại:
Focus popupVề lý thuyết,
chúng ta có các phương thức Trước đây, chúng ta còn có thể Như trong ví dụ dưới đây, chúng ta "bắt buộc" người dùng focus vào popup:
Trước đây, điều này là một nỗi ám ảnh với người dùng, bởi nó làm cửa sổ popup lúc nào cũng nổi trên màn hình mà không làm gì khác được. Tuy nhiên, giờ đây, các trình duyệt đã bảo vệ người dùng tốt hơn và những thao tác như trên hầu như không cần dùng được nữa. Chúng ta vẫn có thể sử dụng Mỗi trình duyệt lại có một phương thức khác nhau cho việc này. Ví dụ, các trình duyệt trên di động thường bỏ qua phương thức Thế nhưng, vẫn có một số điều mà JavaScript có thể làm được. Ví dụ, sau khi mở một popup, chúng ta có thể gọi Block popupPopup đã xuất hiện từ thuở xa xưa của công nghệ. Mục đích ban đầu là để hiển thị các nội dung khác mà không cần thay đổi đến trang hiện tại. Ngày nay, chúng ta có thể nhiều cách thức khác nhau để thực hiện việc đó: JavaScript có thể gửi các request và nhận phản hồi sau đó hiển thị. Popup hầu như không còn cần thiết, nhưng vẫn có nhiều lúc, popup vẫn có vai trò rất quan trọng, như đã nó ở trên, dù không nhiều. Thế nhưng, popup cũng có những vấn đề của riêng nó. Nhiều người đã lợi dụng popup để spam quảng cáo cho người dùng. Điều đó vẫn còn tiếp diễn đến tận bây giờ, rất nhiều website mở hàng đống popup quảng cáo đủ thể loại mỗi khi người dùng truy cập. Do đó, các trình duyệt hiện nay đều phát triển một cơ chế, block popup giúp bảo vệ người dùng khỏi những thứ phiền phức đó. Mặc định, chế độ block pop được bật sẵn nên nhiều khi người dùng không để ý nhưng nó đã giúp rất nhiều trong việc tránh làm phiền. Thông thường, các trình duyệt đều được cài đặt để block các popup được mở ra mà không có liên quan gì đến thao tác click chuột của người dùng. Tức là nếu ngay khi người dùng click mà bật popup thì không sao, nhưng sau khi gọi ajax hay các request khác mà bật popup thì popup đó sẽ bị block. Ví dụ đoạn code sau muốn mở một popup sau khi gọi một query thông qua fetch API, popup này sẽ bị chặn bởi rất nhiều trình duyệt:
Thế nhưng, trong trường hợp cần thiết, vẫn có cách để vượt qua được block popup này. Nhưng trong bài viết tôi sẽ không mô tả cụ thể ở đây. Kết luậnPopup có thể được mở thông qua phương thức Block popup là một cơ chế của trình duyệt (mặc định được bật sẵn) để tránh việc các popup làm phiến người dùng quá mức. Nếu cần đến popup, tốt nhất là hãy báo cho người dùng biết về việc đó, chỉ một icon nhỏ biểu thị sẽ có cửa sổ mở ra sẽ giúp ích rất nhiều trong trải nghiệm người dùng. |