Cửa sổ phương thức html. Tạo một cửa sổ phương thức bằng HTML5 và CSS3. Cửa sổ phương thức đơn giản nhất sử dụng HTML và CSS

Đơn giản về chức năng cửa sổ phương thức, được thực hiện hoàn toàn trên CSS thuần túy bạn có thể đặt nó ở đâu chức năng khác nhauđể gọi trên trang web. Đây có lẽ là một trong nhiều cửa sổ mà tôi đã gặp khi lựa chọn các cửa sổ phương thức, về mặt cài đặt cũng như về mặt cài đặt. Nhưng điều chính là chức năng của nó sẽ không thua kém những người khác. Ngoài ra, theo mặc định, nó được làm trong bóng râm, ở bên phải góc trên cùng Có một nút được cài đặt theo hình chữ thập.

Cái này sẽ được sử dụng để vô hiệu hóa chức năng hoặc đơn giản là làm cho khung biến mất, trong đó ngay cả trên phần tử nhỏ này cũng có tác dụng thay đổi bảng màu. Bây giờ quản trị viên web có thể đặt nó trên trang web và đặt vào đó một mô tả hoặc toán tử có thể hiển thị danh mục khác nhau, như số liệu thống kê hoặc người cung cấp thông tin.

Nhưng vấn đề là, nếu bạn có kiểu tài nguyên tối, thì trong kiểu, bạn có thể nhanh chóng thay đổi gamma, hay nói đúng hơn là điều chỉnh nó cho phù hợp. thiết kế ban đầu. Đây là một trong những phương pháp tiêu chuẩn cách tạo CSS thuần túy trên một cửa sổ phương thức sẽ được khởi chạy khi nhấp vào nút bên dưới liên kết có ràng buộc HTML. Bản thân nút này mang lại nhiều khả năng hiển thị hơn, trong đó, trong các kiểu, bằng cách xóa một lớp, tên sẽ vẫn còn, tên này có thể được đặt trong điều hướng hoặc trong bảng điều khiển, nơi đặt chức năng chính hoặc điều hướng trang web.

Đây là lúc kiểm tra xem mọi thứ có hoạt động tốt không:

Hãy bắt đầu cài đặt:

Cửa sổ có nút

CSS

Butksaton-satokavat (
hiển thị: khối nội tuyến;
trang trí văn bản: không có;
lề phải: 7px;
bán kính đường viền: 5px;
phần đệm: 7px 9px;
nền: #199a36;
màu sắc: #fbf7f7 !quan trọng;
}

Anelumen (
hiển thị: linh hoạt;
vị trí: cố định;
trái: 0;
trên cùng: -100%;
chiều rộng: 100%;
chiều cao: 100%;
căn chỉnh các mục: giữa;
biện minh-nội dung: trung tâm;
độ mờ: 0;
-webkit-transition: top 0s .7s, độ mờ .7s 0s;
chuyển đổi: top 0s .7s, độ mờ .7s 0s;
}

Anelumen: mục tiêu (
trên cùng: 0;
độ mờ: 1;
-webkit-chuyển tiếp: không có;
chuyển tiếp: không có;
}

Hình Anelumen (
chiều rộng: 100%;
chiều rộng tối đa: 530px;
vị trí: tương đối;
phần đệm: 1,8em;
độ mờ: 0;
màu nền: trắng;
-webkit-transition: độ mờ .7s;
chuyển tiếp: độ mờ .7s;
}

Hình Anelumen.lowingnuska (
nền: #f9f5f5;
bán kính đường viền: 7px;
phần đệm trên cùng: 8px;
đường viền: 3px liền khối #aaabad;
}

Anelumen.lowingnuska hình h2 (
lề trên: 0;
phần đệm dưới cùng: 3px;
viền dưới: 1px Solid #dcd7d7;
}

Anelumen: con số mục tiêu (
độ mờ: 1;
}

Anelumen.lowingnuska.compatibg-ukastywise (
trang trí văn bản: không có;
vị trí: tuyệt đối;
phải: 8px;
trên cùng: 0px;
cỡ chữ: 41px;
}

Anelumen.nedismiseg (
trái: 0;
trên cùng: 0;
chiều rộng: 100%;
chiều cao: 100%;
vị trí: cố định;
màu nền: rgba(10, 10, 10, 0,87);
nội dung: "";
con trỏ: mặc định;
khả năng hiển thị: ẩn;
-webkit-transition: tất cả .7s;
chuyển tiếp: tất cả .7 giây;
}

Anelumen:target .nedismiseg (
khả năng hiển thị: có thể nhìn thấy;
}

Bạn cũng cần biết rằng kiểu dáng CSS và lớp giả là một trong những thứ không được sử dụng đầy đủ bởi Tính năng CSS với nhiều ứng dụng tiềm năng thú vị.

Nó bắt đầu khi địa chỉ URL trang tương ứng với mã định danh phần tử của nó hoặc bạn có thể nói khác đi, đây là lúc người dùng chuyển đến yếu tố cụ thể Trên trang.

Chào mọi người! Trong đó một bài học nhỏ Chúng ta sẽ tạo một cửa sổ phương thức đơn giản nhưng mạnh mẽ bằng cách sử dụng CSS thuần túy. Và đồng thời chúng tôi sẽ lặp lại (và chúng tôi sẽ mở cho ai) như vậy thứ hữu ích như flexbox. Trong trường hợp này, chúng tôi sẽ không chỉ tạo một cửa sổ phương thức mở khi được nhấp vào mà còn được đặt chính xác ở giữa màn hình. Ngày xửa ngày xưa, việc này chỉ có thể được thực hiện bằng cách sử dụng javascript, nhưng thời gian trôi qua và bây giờ việc này có thể được thực hiện chỉ với 4 dòng mã.

Mở cửa sổ phương thức

Toàn bộ cửa sổ phương thức này bao gồm hai lớp - lớp đầu tiên có lớp Cửa sổ phương thức, làm tối toàn bộ không gian xung quanh cửa sổ phương thức và sẽ căn chỉnh nội dung của cửa sổ vào giữa màn hình. Lớp thứ hai là lớp Phương thức_Body- chứa nội dung của chính cửa sổ phương thức.

Bây giờ hãy tạo mã CSS cho đánh dấu này:

Phương thức (vị trí: cố định; hiển thị: không có; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; chỉ mục z: 0; nền: rgba(0,0,0,0.7); sự kiện con trỏ: không ; ) .Modal:target ( display: flex; sự kiện con trỏ: auto; ) .Modal_Body ( vị trí: tương đối; z-index: 2; display: block; lề: auto; đệm: 15px; nền: #FFF; ) . ModalFull (vị trí: tuyệt đối; hiển thị: khối; chỉ mục z: 0; chiều rộng: 100%; chiều cao: 100%; )

Bây giờ chúng ta hãy xem hoạt động của cửa sổ phương thức và hiểu cách thức hoạt động của nó.

Như chúng ta có thể thấy, khi bạn nhấp vào “Mở cửa sổ phương thức”, toàn bộ cửa sổ sẽ được tô bóng và một cửa sổ phương thức màu trắng xuất hiện chính xác ở giữa. Bây giờ chúng ta hãy dừng lại ở đó và cống hiến hết mình cho lý thuyết.

Vì chúng tôi đã đồng ý không sử dụng javascript và không thể sử dụng nó để theo dõi số lần nhấp vào các phần tử, nên chúng tôi có thể dễ dàng thực hiện việc này bằng cách sử dụng lớp giả css và liên kết neo có hàm băm (để biểu thị phần tử trên trang nhất định) và nhận dạng với giá trị phải bằng con trỏ trong liên kết. Hãy xem ví dụ của chúng tôi: href liên kết và nhận dạng vùng chứa chính của cửa sổ phương thức có cùng giá trị - Cửa sổ phương thức. Điều này rất quan trọng vì trình duyệt cần hiểu những phần tử nào sẽ tương tác với nhau.

Trong trường hợp của chúng tôi, vùng chứa chung của cửa sổ phương thức bị ẩn và theo đó, toàn bộ nội dung của cửa sổ phương thức bị ẩn. Nhưng khi nhấp vào liên kết, phần tử sẽ có một lớp giả :mục tiêu và xuất hiện tương ứng. Tìm trong mã css - thuộc tính trưng bày thay đổi từ không có TRÊN uốn cong. Lưu ý rằng nó là flex, vì với nó chúng ta có thể căn chỉnh Phương thức_Body chính xác ở giữa màn hình. Chúng tôi đã viết tất cả các phong cách khác cho nó ngay lập tức.

Nhân tiện, nếu bạn không hiểu rõ tại sao nó lại bị phẳng trên toàn bộ bề mặt màn hình, thì tôi sẽ nói cho bạn biết - tất cả là về 4 dòng sau:

Đỉnh: 0; phải: 0; đáy: 0; trái: 0;

Chúng tôi đã chỉ ra rằng nó phải ở mức 0 pixel ở bên phải, bên trái, trên cùng và dưới cùng cùng một lúc. Thay vào đó, bạn có thể sử dụng, ví dụ: cấu trúc sau:

Chiều rộng: 100%; chiều cao: 100vh;

Ở đây chúng tôi chỉ định chiều rộng bằng 100% màn hình, nhưng tốt hơn là đặt chiều cao bằng cách sử dụng chiều cao khung nhìn- chiều cao cửa sổ trình duyệt. Tôi sẽ bám vào phiên bản của tôi.

Khác sắc thái quan trọng là ý nghĩa thuộc tính chỉ mục z Tại phương thức Và Phương thức_Body. Họ phải có mặt và Phương thức_Body nó phải có giá trị lớn hơn ít nhất một đơn vị, nếu không nội dung của cửa sổ phương thức sẽ không khả dụng - các liên kết và nút sẽ không thể nhấp được. Và nếu có nội dung cuộn, điều này cũng sẽ không hoạt động, vì một phần tử sẽ chồng lên phần tử khác.

Hãy tiếp tục tạo ra kiệt tác của chúng tôi. Khi nhấp vào, một cửa sổ phương thức sẽ xuất hiện, nhưng chúng ta không thể đóng nó dễ dàng như vậy. Hãy thêm một nút để đóng nó:

Trên thực tế, cô ấy hủy bỏ :mục tiêu cho cửa sổ phương thức của chúng tôi và sau đó nó chỉ chấp nhận điểm xuất phát- biến mất khỏi tầm mắt. Nhưng có một chút tinh tế với liên kết này - khi bạn nhấp vào nó, trình duyệt sẽ cố gắng tìm một phần tử như vậy, nhưng sẽ không thành công và sẽ cuộn trang về đầu. Hành vi này là một trong những nhược điểm nhỏ của phương pháp tạo cửa sổ phương thức này, nhưng nó có thể được giải quyết.

Đối với thuộc tính này href tại liên kết chúng tôi thay đổi từ «#» TRÊN "#ModalWindowĐóng" và đối với liên kết nút đã mở cửa sổ, hãy thêm thuộc tính nhận dạng với ý nghĩa tương tự. Bạn cũng có thể sử dụng thuộc tính tên, nhưng trong HTML5 tốt hơn nên xác định một điểm neo và yêu cầu một thuộc tính nhận dạng.

Mở cửa sổ phương thức

Bây giờ khi nhấp vào trình duyệt sẽ quay trở lại nút. Thành thật mà nói, tôi muốn nói rằng mỏ neo này sẽ nằm dọc theo cạnh trên của màn hình. Tuy nhiên, nếu nút mở này nằm ở đầu trang hoặc chân trang thì vấn đề này sẽ được giải quyết. Và nếu tiêu đề có một vị trí cố định thì nó sẽ hoàn toàn ổn - ví dụ như để đặt hàng gọi lại hoặc đặt hàng trước/tư vấn sẽ hoàn hảo ngay cả khi cửa sổ đóng lại.

Đây là một ví dụ về những gì chúng tôi có:

Bạn có thể sửa đổi vùng chứa thêm một chút Phương thức_Body- đây là những hạn chế về kích thước (để nó không bị dàn trải về chiều cao và chiều rộng). Và một sắc thái nhỏ nữa - nếu có thể, tôi khuyên bạn nên đặt mã bằng một cửa sổ phương thức trước thẻ đóng.

Đây là cách bạn có thể nhanh chóng tạo một cửa sổ phương thức. Mã này chúng tôi đã viết có thể được sử dụng trong phiên bản cơ bản, thêm các kiểu cần thiết nếu cần.

Tôi hy vọng bài học của tôi hữu ích cho bạn. Chúc bạn một ngày tốt lành và hẹn gặp lại cuộc họp mới trên Quần đảo Web!

Cửa sổ phương thức là một công cụ được sử dụng thường xuyên trong kho vũ khí của quản trị trang web. Nó rất phù hợp để giải quyết số lượng lớn các tác vụ như hiển thị biểu mẫu đăng ký, đơn vị quảng cáo, tin nhắn, v.v.

Nhưng dù nơi quan trọng V. hỗ trợ thông tin project, các cửa sổ phương thức thường được triển khai bằng JavaScript, điều này có thể gây ra sự cố khi mở rộng chức năng hoặc đảm bảo khả năng tương thích ngược.

HTML5 và CSS3 giúp việc tạo các cửa sổ phương thức trở nên vô cùng dễ dàng.

đánh dấu HTML

Bước đầu tiên để tạo một cửa sổ phương thức là đánh dấu đơn giản và hiệu quả:

Mở cửa sổ phương thức

Bên trong phần tử div Nội dung của cửa sổ phương thức được đặt. Bạn cũng cần cung cấp một liên kết để đóng cửa sổ. Ví dụ: hãy đặt một tiêu đề đơn giản và một vài đoạn văn. Đánh dấu đầy đủ ví dụ của chúng tôi, nó sẽ trông như thế này:

Mở cửa sổ phương thức

Kiểu dáng

Tạo một lớp học modalDialog và bắt đầu hình thành vẻ bề ngoài:

ModalDialog (vị trí: cố định; họ phông chữ: Arial, Helvetica, sans-serif; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; nền: rgba(0,0,0,0.8); z-index : 99999; -webkit-transition: độ mờ 400ms dễ dàng; -moz-transition: độ mờ 400ms dễ dàng; chuyển tiếp: độ mờ 400ms dễ dàng; hiển thị: không có; sự kiện con trỏ: không; )

Cửa sổ của chúng ta sẽ có một vị trí cố định, tức là nó sẽ di chuyển xuống dưới nếu bạn cuộn trang khi mở cửa sổ. Ngoài ra, nền đen của chúng tôi sẽ mở rộng để lấp đầy toàn bộ màn hình.

Nền sẽ có độ trong suốt nhẹ và cũng sẽ được đặt lên trên tất cả các thành phần khác thông qua việc sử dụng thuộc tính chỉ số z.

Cuối cùng, chúng tôi thiết lập các hiệu ứng chuyển tiếp để hiển thị cửa sổ phương thức của mình và ẩn nó ở trạng thái không hoạt động.

Có thể bạn chưa biết tài sản sự kiện con trỏ, nhưng nó cho phép bạn kiểm soát cách các phần tử sẽ phản ứng với những cú nhấp chuột. Chúng tôi đặt giá trị thành giá trị của nó cho lớp modalDialog, vì liên kết sẽ không phản hồi khi nhấp chuột khi lớp giả đang hoạt động ":mục tiêu".

Bây giờ chúng ta thêm một lớp giả :mục tiêu và kiểu dáng cho cửa sổ phương thức.

ModalDialog:target ( display: block; con trỏ-sự kiện: auto; ) .modalDialog > div ( width: 400px; vị trí: tương đối; lề: 10% tự động; phần đệm: 5px 20px 13px 20px; bán kính đường viền: 10px; nền: # fff; nền: -moz-tuyến tính-gradient(#fff, #999); nền: -webkit-tuyến tính-gradient(#fff, #999); nền: -o-Tuyến-gradient(#fff, #999); )

Lớp giả mục tiêu thay đổi chế độ hiển thị của phần tử, vì vậy cửa sổ phương thức của chúng ta sẽ được hiển thị khi nhấp vào liên kết. Chúng tôi cũng thay đổi giá trị thuộc tính sự kiện con trỏ.

Chúng tôi xác định chiều rộng và vị trí của cửa sổ phương thức trên trang. Chúng tôi cũng xác định độ dốc cho nền và các góc tròn.

Đóng cửa sổ

Bây giờ chúng ta cần triển khai chức năng đóng cửa sổ. Hình thành sự xuất hiện của nút:

Đóng ( nền: #606061; màu: #FFFFFF; chiều cao dòng: 25px; vị trí: tuyệt đối; phải: -12px; căn chỉnh văn bản: giữa; trên cùng: -10px; chiều rộng: 24px; trang trí văn bản: không có; phông chữ- trọng lượng: đậm; -webkit-border-radius: 12px; -moz-border-radius: 12px; bán kính đường viền: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover ( nền: #00d9ff; )

Đối với nút của chúng tôi, chúng tôi đặt vị trí nền và văn bản. Sau đó, chúng ta định vị nút, làm tròn nó bằng thuộc tính làm tròn khung và tạo thành bóng sáng. Khi bạn di chuột qua nút, chúng ta sẽ thay đổi màu nền.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo một cửa sổ phương thức bằng HTML5 và CSS3. Trong hướng dẫn này, chúng tôi sẽ không sử dụng JS, chỉ sử dụng CSS3 đầy đủ. Cửa sổ phương thức có thể được sử dụng cho một biểu mẫu nhận xét, cho ảnh và video, đồng thời có nhiều tùy chọn khác để sử dụng.

Hãy bắt đầu tạo cửa sổ phương thức của chúng ta.

Bước 1: Đánh dấu HTML

Trước hết, chúng ta cần tạo đánh dấu HTML, tức là. tạo một liên kết sẽ mở một cửa sổ và tạo khung cho cửa sổ của chúng ta. Để làm điều này, chúng tôi viết đoạn mã sau:

Bước 2. Nội dung của cửa sổ phương thức

Bây giờ hãy thêm nội dung của cửa sổ của chúng tôi. Hãy tạo một tiêu đề và một số văn bản rồi đặt tất cả vào một thẻ

Cài đặt kiểu

Bây giờ chúng ta có một siêu liên kết được gói trong div. Bạn có thể bắt đầu tạo kiểu cho thùng chứa để làm cho nó thực tế hơn. Đầu tiên, hãy tạo một lớp phương thức cho cửa sổ phương thức trong CSS. Để làm điều này, chúng tôi sử dụng phần tử giả :Before :

Phương thức: trước ( nội dung: ""; hiển thị: không có; nền: rgba(0, 0, 0, 0.6); vị trí: cố định; trên cùng: 0; trái: 0; phải: 0; dưới cùng: 0; chỉ số z: 10; ) .modal:target:trước ( display: block; )

Chúng tôi tạo một cửa sổ phương thức, cho nó một vị trí cố định. Nó sẽ di chuyển xuống khi người dùng cuộn trang.

Ngoài ra, chúng tôi đặt các cạnh trên, phải, dưới và trái về 0 để nền tối bao phủ toàn bộ màn hình. Bây giờ chúng ta cần đặt nền, đường viền, bán kính cho hộp thoại .modal và cả vị trí cố định. Mã CSS của chúng ta sẽ trông như thế này:

Hộp thoại phương thức ( nền: #fefefe; đường viền: #333 Solid 1px; bán kính đường viền: 5px; lề trái: -200px; vị trí: cố định; trái: 50%; trên cùng: -100%; chỉ mục z: 11; chiều rộng: 360px; -webkit-transform: dịch (0, -500%); -ms-transform: dịch (0, -500%); biến đổi: dịch (0, -500%); -webkit-transition: -webkit -transform giảm bớt 0,3s; -moz-transition: -moz-transform giảm bớt 0,3s; -o-transition: -o-transform giảm bớt 0,3s; chuyển tiếp: biến đổi giảm bớt 0,3s; )

Phương thức:đích .modal-hộp thoại ( -webkit-transform: dịch(0, 0); -ms-transform: dịch(0, 0); biến đổi: dịch(0, 0); top: 20%; )

Dưới đây là một vài kiểu khác có thể sử dụng để làm cho phương thức của bạn trông đẹp mắt:

body ( color: #333; font-family: "Helvetica", arial; Height: 80em; ) .wrap ( đệm: 40px; text-align: center; ) hr ( clear: cả hai; lề-top: 40px; lề- đáy: 40px; viền: 0; viền trên: 1px rắn #aaa; ) h1 ( cỡ chữ: 30px; lề dưới: 40px; ) p ( lề-dưới: 20px; ) .modal-body ( đệm: 20px ; ) .modal-header, .modal-footer ( đệm: 10px 20px; ) .modal-header ( border-bottom: #eee Solid 1px; ) .modal-header h2 ( font-size: 20px; ) .modal-footer ( border-top: #eee Solid 1px; text-align: right; )

Bây giờ chúng ta đã tạo kiểu cho cửa sổ phương thức HTML và làm cho nó hoạt động được, tất cả những gì chúng ta cần làm là tạo một nút ở dưới cùng bên phải. Mã CSS:

Btn ( nền: #428bca; đường viền: #357ebd rắn 1px; bán kính đường viền: 3px; màu: #fff; hiển thị: khối nội tuyến; cỡ chữ: 14px; phần đệm: 8px 15px; trang trí văn bản: không có; văn bản- căn chỉnh: trung tâm; chiều rộng tối thiểu: 60px; vị trí: tương đối; chuyển tiếp: màu .1s dễ dàng; /* top: 40em;*/ ) .btn:hover ( nền: #357ebd; ) .btn.btn-big ( font- kích thước: 18px; đệm: 15px 20px; chiều rộng tối thiểu: 100px; ) .btn-đóng ( color: #aaa; cỡ chữ: 30px; trang trí văn bản: không có; vị trí: tuyệt đối; phải: 5px; trên cùng: 0; ) .btn-close:hover ( color: #919191; ) /*add để dừng cuộn lên*/ #close ( display: none; )

Ưu điểm của cửa sổ phương thức được tạo là gì?

Ưu điểm chính của cửa sổ phương thức của chúng tôi là nó được tạo chỉ bằng HTML5 và CSS3. Tại sao cái này lại quan trọng đến vậy? phương thức Cửa sổ Javascript là thứ mà ngay cả người mới bắt đầu cũng có thể tạo ra. Có rất nhiều giải pháp làm sẵn, có thể tải xuống trên Internet. Vậy tại sao chúng ta lại muốn làm điều đó chỉ với HTML5 và CSS3 mà không cần JavaScript?

Ví dụ: để người dùng không hỗ trợ JavaScript có thể sử dụng cửa sổ phương thức. Thống kê cho thấy hơn 2% người dùng trên toàn thế giới không sử dụng JavaScript.

Chúng tôi đã sử dụng hiệu quả một vài dòng mã CSS để tạo hoạt ảnh. Nếu bạn áp dụng bất kỳ Thư viện JavaScript hoạt hình, bạn sẽ ngạc nhiên khi thấy chúng tôi sử dụng ít mã hơn nhiều. Điều này mang lại một lợi thế khác - hơn mã sạch.

Chúng tôi đã triển khai một div chứa tất cả hoạt ảnh và đó chỉ là một vài dòng mã. Điều này làm cho mã sạch hơn và giải pháp này cho phép bạn thay đổi hoặc di chuyển div này theo ý muốn mà không phải lo lắng về việc thay đổi mã trong JavaScript.

Và cuối cùng, HTML5 và CSS3 chính là tương lai. Tất cả chúng tôi đều cố gắng sử dụng chúng trong các dự án của mình. Nhờ họ mà bạn có được mã sạch hơn mà không phải lo lắng về Thư viện JavaScript. HTML5 và CSS3 vẫn tiếp tục tồn tại nên không có lý do gì để không sử dụng chúng.

Phần kết luận

Giờ đây, bạn có thể tạo một cửa sổ phương thức đơn giản bằng cách sử dụng HTML5 và CSS3. Cửa sổ này có thể được sử dụng cho biểu mẫu đăng nhập hoặc đăng ký, đơn vị quảng cáo, v.v. Ngoài ra, bạn đã tìm hiểu lý do tại sao bạn nên sử dụng HTML5 và CSS3 thay vì JavaScript và xem một số ví dụ về cách các trang web sử dụng cửa sổ phương thức.

Dịch bài viết" Cách tạo cửa sổ phương thức CSS mà không cần Javascript"đã được chuẩn bị bởi nhóm dự án thân thiện.