10 plugin cửa sổ phương thức JavaScript miễn phí

Bạn có thể tìm nhiều phương thức CSS thuần túy nhưng những không cung cấp điều khiển giống như JavaScript. Với phương thức JavaScript, bạn có thể thêm hình động tùy chỉnh, đầu vào UI và thực sự nâng cao trải nghiệm người dùng.

Nhưng, tại sao lại thiết kế một cái gì đó từ đầu khi bạn có thể sử dụng thư viện JS? Tôi đã thu thập được kịch bản phương thức hỗ trợ JavaScript miễn phí tốt nhất ở đây để bạn xem qua và chọn ra mục yêu thích của bạn.

Tất cả những thứ này là hoàn toàn miễn phí và nguồn mở, để bạn có thể chỉnh sửa mã và sắp xếp lại chúng để phù hợp với trang web của bạn khi cần.

1. đau nhói

Một trong những kịch bản phương thức miễn phí yêu thích của tôi là Tingle.js. nó là được xây dựng trên JavaScript vanilla không có phụ thuộc, vì vậy bạn không cần bất kỳ thư viện jQuery hoặc Zepto nào.

Thêm vào đó, nó là một thư viện khá nhỏ, mặc dù nó có rất nhiều lựa chọn để tùy biến. Bạn có thể thay đổi các hiệu ứng chuyển tiếp CSS, hoạt ảnh phương thức JavaScript và toàn bộ trải nghiệm người dùng chỉ bằng một vài cài đặt.

Tingle.js được thiết kế để trở thành hoàn toàn có thể truy cập và đáp ứng, vì vậy nó cũng hoạt động trên các thiết bị di động và cũng hỗ trợ các trình duyệt cũ hơn.

Bạn có thể thấy tất cả các tài liệu trên GitHub, cùng với mã nguồn miễn phí. Họ cũng có một liên kết demo, vì vậy bạn có thể kiểm tra Tingle trong hành động để xem nếu nó có thể phù hợp trên trang web của bạn.

2. Phương thức vani

Đây là một phương thức tôi vừa tìm thấy gần đây và nó rất nhiều đơn giản hơn hầu hết. Phương thức vani đúng với tên của nó với một kịch bản vanilla tinh khiết cung cấp năng lượng cho phương thức, cùng với Chuyển tiếp CSS.

Điều này là khá nhỏ và siêu linh hoạt, với CSS tùy chỉnh để sắp xếp lại các cửa sổ. Nó cũng có khá nhiều tùy chọn bạn có thể thay đổi bằng JavaScript, làm cho nó hoàn hảo để chạy các chức năng DOM hoặc thậm chí các chức năng gọi lại.

Hãy nhìn vào trang demo để xem phong cách mặc định. Đây là một thiết kế thực sự cơ bản, vì vậy nó sẽ yêu cầu tùy chỉnh để sử dụng nó trên một trang web sản xuất. Nhưng điều này cũng cắt giảm tổng số yêu cầu mã, vì vậy nó một trong những thư viện phương thức JavaScript mỏng nhất.

3. đồng bằng

Nếu bạn muốn một kịch bản thực sự đơn giản, tôi đánh giá cao đồng bằng. Nó là được xây dựng trên jQuery, nhưng no la một trong những kịch bản phương thức nhỏ nhất hiện có.

Nó làm không sử dụng bất kỳ tệp CSS hoặc hình ảnh bên ngoài. Chỉ cần một tập lệnh JS là tất cả những gì bạn cần.

Khi tập lệnh plainModal được thêm vào trang của bạn, bạn chỉ cần nhắm mục tiêu nút phương thức và bạn tốt để đi. Điều này cho phép bạn kiểm soát màn hình và mức độ bạn muốn thay đổi giao diện phương thức.

Ngoài ra, bạn có thể thiết lập phương thức với một dòng JavaScript theo chủ đề tối giản của plugin này.

4. Modaal

Không thể phủ nhận khả năng truy cập rất lớn trên web. Mỗi mục tiêu của nhà thiết kế nên là một kinh nghiệm bao quát hơn cho mọi người trên khắp thế giới trên các thiết bị khác nhau và với những hạn chế có thể có.

Với Modaal, bạn có được trải nghiệm hoàn hảo đó vượt qua bài kiểm tra WCAG 2.0 với xếp hạng khả năng truy cập AA vững chắc. Bạn có thể thấy một ví dụ tuyệt vời trên trang chính, cùng với một số tài liệu mã.

Nhìn chung, tôi khuyên dùng plugin JavaScript vanilla này cho bất cứ ai thực sự quan tâm đến khả năng tiếp cận. Xếp hạng AA có thể được yêu cầu trên một số dự án web, vì vậy Modaal là một tập lệnh thực sự tiện dụng để giữ dấu trang.

5. Phương thức Scotch JS

Nhóm phát triển tại Scotch.io xuất bản các hướng dẫn và hướng dẫn cho các lập trình viên. Công việc của họ thật đáng kinh ngạc và nó thực sự thể hiện trong tập lệnh phương thức JavaScript này, được lưu trữ trên Scotch GitHub.

Phương thức được phát triển bởi Ken Wheeler và kịch bản này thậm chí có một hướng dẫn đầy đủ nếu bạn muốn tìm hiểu làm thế nào nó hoạt động. Tuy nhiên, mã miễn phí phải đủ cho hầu hết các nhà phát triển vì đây là siêu nhẹ và dễ cài đặt. Không phụ thuộc và thậm chí là bản demo mẫu trên CodePen.

6. Bootbox.js

Cách nhanh nhất để khởi động một dự án web mới là thông qua Bootstrap. Đó là một khung công tác mạnh mẽ khuyến khích các nhà phát triển tạo tiện ích riêng của họ vào thư viện.

Một ví dụ như vậy là Bootbox.js, một thư viện JavaScript nhỏ, được thiết kế chỉ dành cho các cửa sổ phương thức trong Bootstrap. Nó thật ra hoạt động trên hộp thoại nơi người dùng có thể nhấp vào OK hoặc hủy, dựa trên yêu cầu của bạn.

Các hộp thoại JavaScript điển hình là khủng khiếp, giống như các hộp cảnh báo. Kịch bản Bootbox cung cấp một thay thế vững chắc cho bất cứ ai làm việc trong hệ sinh thái BS3 / BS4.

Một lần nữa, nó hoàn toàn miễn phí và nguồn mở, cùng với một trang tài liệu dài giúp bạn đứng dậy và chạy nhanh.

7. iziModal.js

nếu bạn cần một giải pháp tùy chỉnh hơn một chút kiểm tra iziModal.js. Công cụ này là đáp ứng đầy đủ và được thiết kế để làm việc trong tất cả các trình duyệt hiện đại một cách hoàn hảo.

Tôi vẫn chưa tìm thấy một kịch bản phương thức khác cung cấp một thiết kế thẩm mỹ như vậy. Nó đi ra cổng với một UI tuyệt đẹp có thể kết hợp thực tế vào bất kỳ trang web nào. Tuy nhiên, bạn có thể cũng thiết kế lại phù hợp với nhu cầu của bạn.

Chỉ cần lưu ý plugin này không chạy trên jQuery, vì vậy nó là một trong số ít ở đây có một sự phụ thuộc. Nhưng, nếu bạn muốn các kiểu iziModal, đó là một cái giá nhỏ phải trả cho các cửa sổ popover bóng bẩy như vậy.

8. Phương thức jQuery

Các Plugin Modal jQuery có lẽ là tập lệnh phương thức đơn giản nhất trên jQuery bạn sẽ tìm thấy.

Nó có thể được lập trình để tự động liên kết với các yếu tố HTML nhất định dựa trên các thuộc tính khác nhau. Nó cũng hỗ trợ phím tắt chẳng hạn như ESC để đóng cửa sổ.

Tổng cộng, plugin này các biện pháp dưới 1KB và nó hoạt động trong mọi trình duyệt có thể bạn có thể tưởng tượng. Các nhà phát triển jQuery nên lưu plugin này để truy cập nhanh vào một tập lệnh phương thức đơn giản mà không cần rườm rà.

9. PicoModal

Quay trở lại với JavaScript vanilla, chúng tôi có Thư viện PicoModal. Đây có lẽ là một trong những tập lệnh nhỏ nhất bạn sẽ tìm thấy và nó được thiết kế để chạy hoàn hảo trên một đường trục JavaScript vanilla.

Nó hỗ trợ tất cả các trình duyệt hiện đại, bao gồm các trình duyệt di động cho Android và Mobile Safari cho iOS. Nó thậm chí còn hỗ trợ các trình duyệt IE cũ hơn, có từ IE7!

Nhà phát triển của PicoModal đã tạo một tập lệnh JSfiddle nhỏ để chứng minh làm thế nào nó hoạt động. Đây là một ví dụ rất nhỏ và nó không bị ràng buộc với một sự kiện nhấp chuột hoặc bất cứ điều gì khác, nhưng nó không khó để tập lệnh trong một vài nút chuyển đổi để chạy cửa sổ phương thức này đúng cách.

10. Avgrund

Avgrund có lẽ là một trong những phương thức độc đáo nhất trong danh sách này. Nó sử dụng một hiệu ứng làm mờ trang tùy chỉnh, cùng với hình ảnh động thu nhỏ để đưa phương thức ngay vào tầm nhìn.

Không phải ai cũng đánh giá cao hoạt hình này, vì vậy tôi không thể nói kịch bản này sẽ phù hợp với mọi trang web. Nhưng, nó là một phương thức vani tinh khiết và nó rất dễ cài đặt, chỉ với một CSS và một bộ phim JavaScripte.

Hãy nhìn vào trang demo để xem nó chạy như thế nào Nó chắc chắn có một phong cách độc đáo và là ràng buộc để thu hút sự chú ý với các hình ảnh động tùy chỉnh chỉ hoạt động.

Từ cuối cùng

Bất kể bạn đang tìm kiếm điều gì, tôi sẽ đặt cược có một cái gì đó trong danh sách này phù hợp với nhu cầu của bạn. Nhưng, nếu bạn vẫn không hài lòng duyệt qua GitHub để biết các kịch bản phương thức liên quan và xem những gì bạn có thể tìm thấy.