Ví dụ tạo hộp thoại trong html. Cửa sổ bật lên và phương thức sử dụng phần tử "hộp thoại" HTML5. Tương tác với HTMLDialogElement

Một cửa sổ phương thức có chức năng đơn giản, được tạo hoàn toàn bằng CSS thuần túy, nơi bạn có thể đặt bên dưới 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 làm thế nào để làm nó CSS thuần túyđế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ó liên kết 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

ZorNet.Ru - cổng thông tin quản trị trang web×
Ở đây bạn sẽ tìm thấy nội dung về chủ đề của trang web.

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.

Yếu tố (từ tiếng Anh. hội thoại- hộp thoại) tạo một hộp thoại trong đó bạn có thể hiển thị thông báo hoặc biểu mẫu, chẳng hạn như để đăng nhập vào một trang web.

Hộp thoại được hiển thị với kiểu cài sẵn sau.

Vị trí: tuyệt đối; trái: 0; phải: 0; lề: tự động; đường viền:rắn; phần đệm: 1em; nền: trắng; màu đen;

Thao tác này sẽ hiển thị hộp thoại có nền trắng, viền đen và được căn giữa theo trục ngang. Chiều rộng giống với chiều rộng của vùng chứa chính.

Để hiển thị và ẩn hộp thoại, hãy sử dụng các phương thức show() và close() tương ứng, như trong ví dụ bên dưới. Ngoài ra, hộp thoại có thể được chuyển thành cửa sổ phương thức bằng cách sử dụng phương thức showModal() thay vì show(). Trong trường hợp này, các thành phần khác trên trang bị chặn - không thể chọn văn bản và không thể nhấp vào nút cho đến khi hộp thoại đóng lại. Bạn cũng có thể đóng cửa sổ phương thức bằng phím Esc.

Cú pháp

...

Thẻ đóng

Yêu cầu.

Ví dụ

nội dung hộp thoại ( nền: url(/example/image/shark.jpg) no-repeat; kích thước nền: cover; ) hộp thoại ( nền: rgba(255, 255, 255, 0.7); chiều rộng: 300px; bóng hộp: 0 0 5px rgba(0, 0, 0, 0.5); bán kính đường viền: 5px; ) Mở cửa sổ

Người Polynesia gọi Dải Ngân hà Mango-Roa-I-Ata, có nghĩa là "Cá mập dài lúc bình minh" trong tiếng Maori.

Đóng một cửa sổ

hộp thoại var = document.querySelector("dialog"); document.querySelector("#openDialog").onclick = function() ( hộp thoại.show(); // Hiển thị hộp thoại) document.querySelector("#closeDialog").onclick = function() ( hộp thoại.close() ; // Ẩn hộp thoại)

Kết quả ví dụ này thể hiện trong hình. 1. Khi bạn nhấp vào nút “Mở cửa sổ”, nội dung của phần tử sẽ được hiển thị mà trước đây không thể nhìn thấy được. Nhấp vào nút “Đóng cửa sổ” sẽ ẩn hộp thoại.

Cơm. 1. Chế độ xem cửa sổ hộp thoại

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị được đề xuất - Ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của biên tập viên (Editorial Draft) - bản dự thảo của tiêu chuẩn sau khi được các biên tập viên dự án thực hiện sửa đổi.
• Bản nháp (Dự thảo thông số kỹ thuật) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

Tiêu chuẩn HTML sống (Living) nổi bật - nó không tuân theo cách đánh số phiên bản truyền thống, vì nó được phát triển liên tục và được cập nhật thường xuyên.

Sau một số lượng lớn quảng cáo bật lên trên nhiều trang web khác nhau, thái độ đối với các hộp thoại khác nhau có phần tiêu cực. Tuy nhiên, mọi thứ chắc chắn phụ thuộc vào mục đích sử dụng chúng. Đôi khi việc sử dụng chúng là cần thiết và giúp đơn giản hóa đáng kể trải nghiệm người dùng.

Trước đây, để tạo hộp thoại bạn cần kết nối plugin jQuery như Pop Easy, Twitter khởi động Hộp thoại giao diện người dùng phương thức hoặc jQuery. Tuy nhiên, HTML 5, đã phát triển đáng kể về khả năng, cho phép bạn tránh sử dụng chúng bằng cách sử dụng phần tử tích hợp có tên là .

Trước đây, vào năm 2009, phần tử này đã là một phần của HTML 5 nhưng đã bị loại khỏi nó. Bây giờ anh ấy đã trở lại - dưới một hình thức mới.

Hỗ trợ phần tử bởi trình duyệt

Thật không may, trên khoảnh khắc này sự hỗ trợ của nó là vô cùng hạn chế. Nó chỉ có thể được sử dụng trong Safari 6.0 và Chrome Canary. Tuy nhiên, trong Chrome Canary trước tiên bạn cần kích hoạt nó trong cài đặt. Để thực hiện việc này, hãy truy cập chrome://flags và bật “Kích hoạt các tính năng của Nền tảng web thử nghiệm”.

Tương tác với các phương thức HTMLDialogElement:

HTMLDialogElement có các phương thức sau cho phép bạn làm việc với các hộp thoại.

• show() : Phương thức này được sử dụng để mở hộp thoại. Sự khác biệt giữa phương pháp này và phương pháp tiếp theo là mặc dù cửa sổ hộp thoại đang mở nhưng người dùng vẫn có cơ hội sử dụng trang - họ có thể cuộn trang, sao chép nội dung nào đó, theo liên kết mà không cần tải lại trang, v.v.
• showModal() : Trong trong trường hợp này Người dùng chỉ có quyền truy cập vào “cửa sổ phương thức” đang mở.
• đóng() : Phương pháp nàyđóng hộp thoại. Nhìn về phía trước một chút, tôi sẽ nói rằng bạn có thể truyền tham số returnValue vào đó.

Thuộc tính:

HTMLDialogElement bao gồm hai thuộc tính sau.

• returnValue: Trả về tham số đã được truyền cho close() - không cần thiết phải chỉ định tham số đó, nó là tùy chọn.
• open: Là kiểu dữ liệu Boolean. Điều đó có nghĩa là nó chỉ có thể nhận hai giá trị - true, trong trường hợp đó hộp thoại sẽ được hiển thị cho người dùng hoặc false thì hộp thoại sẽ bị ẩn.

Sự kiện:

Hàm được gọi khi đóng onk trông như thế này:

hộp thoại.addEventListener("close", function() ( Tại đây bạn đã có thể viết mã để thực thi nếu cửa sổ đóng ));

Ngoài các phương thức và thuộc tính được đề cập ở trên, nó còn hỗ trợ:

• biểu mẫu: Được sử dụng để tích hợp một biểu mẫu với . Nhờ liên kết này, nó chỉ hoạt động bên trong hộp thoại.
• Thuộc tính tự động lấy nét: Cần tập trung vào thông tin đầu vào bên trong hộp thoại.
• sự kiện hủy: Sự kiện này sẽ được kích hoạt sau khi cửa sổ được đóng thông qua phím "Thoát ra."

Bây giờ, sau khi nghiên cứu những điều cơ bản, bạn có thể thấy một ví dụ thực tế về việc sử dụng nó.

Cú pháp tạo hộp thoại

Cảm ơn Hevix vì một bài học tuyệt vời;)

Đóng Mở cửa sổ

Mã này rõ ràng và đơn giản đến mức tôi nghĩ nó không cần phải giải thích. Điều bạn cần hiểu là nội dung của cửa sổ bật lên nằm bên trong thẻ và lệnh gọi của nó phải nằm ngoài thẻ này.

Để hiển thị nội dung của phần tử bạn cần sử dụng JavaScript, cụ thể là gọi các phương thức .show() và .close(). Họ đã được đề cập trước đó.

(function() ( hộp thoại var = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() ( hộp thoại.show(); ); document.getElementById("closeDialog").onclick = function() ( hộp thoại.close(); ); ))();

(chức năng() ( tài liệu. getElementById("showDialog"). onclick = hàm () ( hộp thoại. trình diễn(); tài liệu. getElementById("closeDialog"). onclick = hàm () ( hộp thoại. đóng(); } ) () ;

Tất cả đã sẵn sàng. Như bạn có thể thấy, chúng tôi đã sử dụng số dòng mã tối thiểu, không tương xứng nếu chúng tôi kết nối plugin của bên thứ ba cho việc này. Bây giờ, khi bạn nhấp vào nút “Mở cửa sổ”, bạn sẽ thấy một hộp thoại; nhấp vào nút “Đóng” sẽ ẩn nó.

Hộp thoại tạo kiểu

Tôi không nghĩ cần phải nghiên cứu quá sâu về cách tạo kiểu cho cửa sổ bật lên này bằng sử dụng CSS. Mọi thứ ở đây rất rõ ràng ngay cả khi không có sự giúp đỡ của tôi. Tôi sẽ chỉ hỏi anh ấy phong cách chung cho bố cục.

hộp thoại ( trên cùng: 28%; chiều rộng: 400px; đường viền: 1px rắn rgba(0, 0, 0, 0.3); bán kính đường viền: 15px; bóng hộp: 0 3px 7px rgba(0, 0, 0, 0.3); border-top: 5px Solid #eb9816; ) nút( display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; đệm: 0.4rem 0.8em; nền: #eb9816; border-bottom : 1px đặc #f1b75c; màu: trắng; độ dày phông chữ: đậm; lề: 0 0,25rem; căn chỉnh văn bản: giữa; ) nút: di chuột, nút: lấy nét ( độ mờ: 0,92; con trỏ: con trỏ; )

hộp thoại( hàng đầu: 28%; chiều rộng: 400px; đường viền: rgba rắn 1px (0, 0, 0, 0.3); bán kính đường viền: 15px; bóng hộp: 0 3px 7px rgba (0, 0, 0, 0.3 ); đường viền trên cùng : 5px rắn #eb9816 ; cái nút( hiển thị: khối nội tuyến; bán kính đường viền: 3px; đường viền: không có; cỡ chữ: 0,9rem; phần đệm: 0,4rem 0,8em; nền : #eb9816 ; viền dưới : 1px rắn #f1b75c ; màu trắng ; độ dày phông chữ: đậm; ký quỹ: 0 0,25rem; căn chỉnh văn bản: giữa; nút:di chuột, nút:tiêu điểm ( độ mờ: 0,92; con trỏ: con trỏ;

Tạo hộp thoại phương thức

Nếu bạn muốn tập trung hoàn toàn sự chú ý của người dùng vào cửa sổ bật lên, bạn nên sử dụng các phương thức những hộp thoại. Thử thách của họ không khác nhiều so với những thử thách thông thường. Bạn chỉ cần thay đổi tệp JS .show() thành .showModal() . Bạn không cần thay đổi bất cứ điều gì trong HTML.

(function() ( hộp thoại var = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() ( hộp thoại. showModal(); ); document.getElementById("closeDialog").onclick = function() ( hộp thoại.close(); ); ))();

(chức năng() ( hộp thoại var = document. getElementById("Dialog");

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 dự án, cửa sổ phương thức, theo quy định, đượ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 cực kỳ 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 X Cửa sổ phương thức

Một ví dụ về cửa sổ phương thức đơn giản có thể được tạo bằng CSS3.

Nó có thể được sử dụng trong phạm vi rộng, bắt đầu từ việc hiển thị tin nhắn và kết thúc bằng mẫu đăng ký.

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: in đậ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.