Thực đơn
trang chủSự cố

Ví dụ tạo hộp thoại trong html. Ứng dụng HTML: Sử dụng Hộp thoại (Phần 1). Hộp thoại tạo kiểu

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.

Rất thường xuyên, các hộp thoại được sử dụng để nhập bất kỳ dữ liệu nào vào các ứng dụng Windows. Các cửa sổ này chứa các điều khiển trong đó dữ liệu mà ứng dụng yêu cầu được nhập cũng như các nút OK và Cancel, nút đầu tiên xác nhận việc nhập dữ liệu và nút thứ hai sẽ hủy.

Có hai loại hộp thoại:

  • Hộp thoại phương thức chặn tất cả các cửa sổ khác của ứng dụng, tức là người dùng sẽ không thể truy cập bất kỳ cửa sổ nào khác cho đến khi đóng hộp thoại bằng cách nhấn OK hoặc Cancel. Thông thường, các hộp thoại phương thức được sử dụng để nhập một số dữ liệu quan trọng để ứng dụng tiếp tục chạy. Ví dụ: hộp thoại mở tệp luôn được thực hiện theo chế độ.
  • Hộp thoại Modeless (không có mod) không chặn các cửa sổ ứng dụng khác. Người dùng có thể tự do chuyển đổi giữa hộp thoại như vậy và bất kỳ cửa sổ ứng dụng nào khác. Các hộp thoại không có chế độ được sử dụng ít thường xuyên hơn các hộp thoại có chế độ. Chúng được sử dụng để chỉ định các tham số vận hành không quan trọng cho việc tiếp tục chương trình và để thực hiện các hành động khác nhau với cửa sổ chính hoặc tài liệu được tải trong đó. Vì vậy, hộp thoại tìm kiếm luôn ở trạng thái không có chế độ.

trình duyệt web IE cho phép chúng ta sử dụng cả hộp thoại phương thức và không mô hình trong các ứng dụng HTML. Bây giờ chúng ta sẽ xem làm thế nào điều này được thực hiện.

Ghi chú:
Trước khi đọc bài viết này, bạn nên đọc ba bài viết trước trong loạt bài về ứng dụng HTML của Internet Explorer.

1. Chuẩn bị ứng dụng HTML thử nghiệm
Hãy tạo một ứng dụng soạn thảo văn bản HTML đơn giản mà không cần bất kỳ chuông và còi nào. Nó sẽ chứa một khu vực chỉnh sửa lớn, trên thực tế, văn bản được nhập và nút Tham số, khi được nhấp vào, một hộp thoại để nhập tham số sẽ được hiển thị.

Tập hợp các tham số mà người dùng có thể chỉ định sẽ nhỏ. Trước hết, đây là chức năng ngắt dòng văn bản trong khu vực chỉnh sửa - cho dù nó sẽ được bật hay tắt. Và màu văn bản; cho phép người dùng có thể lựa chọn giữa màu đen, xanh dương, xanh lá cây và đỏ.

Chúng tôi sẽ triển khai ứng dụng này theo hai phiên bản: phiên bản đầu tiên sẽ sử dụng hộp thoại theo chế độ để nhập tham số và phiên bản thứ hai sẽ sử dụng hộp thoại không có chế độ.

Mã HTML cho ứng dụng được đưa ra dưới đây.




Trình soạn thảo văn bản


window.resizeTo(710, 490);









Hãy lưu ứng dụng này thành hai tệp: Textedit_modal.hta (phiên bản có hộp thoại phương thức) và Textedit_modeless.hta (phiên bản có hộp thoại không có chế độ). Và hãy bắt đầu...

2. Cách triển khai hộp thoại
Nhưng trước tiên, một khóa học lý thuyết ngắn. Trước hết, nội dung của bất kỳ hộp thoại nào - cả modal và non modal - đều được triển khai dưới dạng một trang web thông thường. Trang web này được lưu trong tập tin riêng biệt với phần mở rộng htm hoặc html (cũng như nội dung của các “cửa sổ” riêng lẻ của ứng dụng, việc tạo ra chúng đã được mô tả trong bài viết thứ hai của loạt bài này).

Khi mở một hộp thoại phương thức, chúng ta có thể truyền một số dữ liệu cho nó (sẽ nói thêm về điều này sau). Ví dụ: đây có thể là các giá trị hiện tại của các tham số ứng dụng, sau đó sẽ được thay thế vào các điều khiển của hộp thoại.

Khi đóng hộp thoại theo chế độ, chúng ta có thể chuyển một số dữ liệu đến cửa sổ đã mở hộp thoại đó. Trong trường hợp hộp thoại cài đặt, đây có thể là các giá trị tham số do người dùng nhập.

Khi mở một hộp thoại không có chế độ, chúng ta không thể chuyển bất kỳ dữ liệu nào tới nó và cũng không thể trả lại dữ liệu đã nhập vào đó cho cửa sổ đã mở nó. Tuy nhiên, chúng ta có thể truy cập cửa sổ này từ cửa sổ đã mở nó và ngược lại, “lấy” từ hộp thoại đến cửa sổ đã mở nó. Chúng ta có thể sử dụng điều này để trao đổi dữ liệu giữa các cửa sổ và thực hiện các hành động trên nội dung của cửa sổ này với cửa sổ khác.

Đó là tất cả cho bây giờ. Hãy bắt tay vào thực hành. Và chúng tôi sẽ xem xét các vấn đề lý thuyết khác trong quá trình thực hiện.

3. Thực hiện các phương thức những hộp thoại
Hãy bắt đầu bằng cách triển khai các hộp thoại phương thức như những hộp thoại được sử dụng phổ biến nhất.

3.1. Mở hộp thoại phương thức
Chúng ta vừa biết rằng nội dung của hộp thoại được triển khai như một trang web thông thường. Tạo một trang web không khó đối với chúng tôi. Nhưng làm thế nào để bạn mở hộp thoại?

Để mở hộp thoại phương thức, hãy sử dụng phương thức showModalDialog của đối tượng Window. Định dạng để gọi phương thức này là:

.showModalDialog(
[,
[,
]]
);
Tham số đầu tiên của phương pháp này là bắt buộc. Nó chỉ định địa chỉ Internet của trang web triển khai nội dung của hộp thoại dưới dạng một chuỗi.

Window.showModalDialog("options_modal.html");
Tham số thứ hai là tùy chọn. Nó chỉ định giá trị sẽ được chuyển vào hộp thoại. (Chúng ta sẽ xem cách lấy giá trị này trong hộp thoại sau.) Giá trị được truyền có thể là bất kỳ loại nào: chuỗi, số, boolean, mảng, hàm hoặc một thể hiện của bất kỳ đối tượng nào.


Ở đây chúng ta đã chuyển số 2 vào hộp thoại.

Tham số thứ ba, cũng là tùy chọn, chỉ định các tham số của chính hộp thoại. Nó phải là một chuỗi chứa tên của các tham số và giá trị của chúng. Tên tham số được phân tách khỏi giá trị bằng dấu hai chấm và thông số riêng cách nhau bằng dấu chấm phẩy (như trong trường hợp viết kiểu CSS).


"hộp thoạiHeight:300px;dialogWidth:400px");
Ở đây chúng tôi đã chỉ định các tham số của hộp thoại để mở - chiều cao (300 pixel) và chiều rộng (400 pixel).

Danh sách các tùy chọn hộp thoại được Internet Explorer hỗ trợ khá lớn. Hãy nhìn vào chúng.

  • hộp thoạiLeft - đặt tọa độ ngang của góc trên cùng bên trái của hộp thoại so với góc trên cùng bên trái của màn hình. Nếu như thông số này không được chỉ định thì tọa độ ngang của cửa sổ sẽ được chọn tùy ý.
  • hộp thoạiTop - đặt tọa độ dọc của góc trên cùng bên trái của hộp thoại so với góc trên cùng bên trái của màn hình. Nếu tham số này không được chỉ định thì tọa độ dọc của cửa sổ sẽ được chọn tùy ý.
  • hộp thoạiHeight - đặt chiều cao của hộp thoại. Nếu tham số này không được chỉ định, hộp thoại sẽ có chiều cao mặc định. Giá trị chiều cao tối thiểu có thể là 100 pixel.
  • hộp thoạiWidth - đặt chiều rộng của hộp thoại tính bằng pixel. Nếu tham số này không được chỉ định, hộp thoại sẽ có chiều rộng mặc định. Chiều rộng tối thiểu có thể là 250 pixel. Để chỉ định tọa độ của góc trên bên trái và kích thước của hộp thoại, có thể sử dụng bất kỳ đơn vị đo lường nào được CSS hỗ trợ, với chỉ định bắt buộc về chỉ định của nó. Vì vậy, trong ví dụ trên, các ký tự px được đặt sau giá trị chiều cao và chiều rộng cho biết chúng được chỉ định bằng pixel.
  • hộp thoạiHide - chỉ định xem hộp thoại có bị ẩn khi in hay không xem trước trước khi in. Giá trị có, 1 hoặc bật biểu thị thực hiện việc này và giá trị không, 0 hoặc tắt biểu thị không thực hiện việc này. Giá trị mặc định là không.
  • center - chỉ định xem hộp thoại có nằm ở giữa màn hình hay không. Giá trị có, 1 hoặc bật yêu cầu Internet Explorer căn giữa hộp thoại trên màn hình, trong khi giá trị không, 0 hoặc tắt yêu cầu Internet Explorer không làm như vậy. Giá trị mặc định là có.

    Ghi chú:
    Nếu bạn chỉ định tọa độ của hộp thoại bằng cách sử dụng tham số hộp thoạiHeight và hộp thoạiWidth, hộp thoại sẽ được đặt tại vị trí được chỉ định trên màn hình, bất kể giá trị của tham số trung tâm là bao nhiêu. Hay nói cách khác, các tham số hộp thoạiHeight và hộp thoạiWidth được ưu tiên.

  • edge - đặt loại đường viền sẽ được hiển thị xung quanh nội dung của hộp thoại, bên trong khu vực máy khách của nó ( khu vực khách hàng- đây là khu vực bên trong của cửa sổ nơi hiển thị nội dung thực tế của trang web). Giá trị tăng lên biểu thị khung "nâng lên" (trên thực tế, khung như vậy gần như vô hình) và giá trị chìm biểu thị khung "lõm" (và khung này khá dễ nhận thấy và, tôi phải nói rằng, làm hỏng rất nhiều xem). Giá trị mặc định được nâng lên.
  • có thể thay đổi kích thước - cho biết liệu người dùng có thể thay đổi kích thước hộp thoại hay không. Giá trị có, 1 hoặc bật mang lại khả năng này, nhưng giá trị không, 0 hoặc tắt thì không. Giá trị mặc định là không. Hầu hết tất cả các hộp thoại được sử dụng trong các ứng dụng viết chuyên nghiệp đều có kích thước không đổi và không thể thay đổi. Tạo hộp thoại với có thể thay đổi kích thước chẳng ích gì, ngoài ra, một cửa sổ như vậy sẽ trông lạ.
  • cuộn - chỉ định xem hộp thoại có thanh cuộn hay không. Giá trị có, 1 hoặc bật sẽ yêu cầu Internet Explorer hiển thị chúng, trong khi giá trị không, 0 hoặc tắt sẽ khiến Internet Explorer không hiển thị chúng. Giá trị mặc định là có. Thật kỳ lạ khi các nhà phát triển Internet Explorer lại quyết định cung cấp thanh cuộn cho hộp thoại theo mặc định. Trong trí nhớ của tác giả, không một ứng dụng Windows nào lọt vào tay ông có hộp thoại với thanh cuộn (tất nhiên, trừ khi bạn tính cả những sản phẩm thủ công của học sinh, trong đó đã gặp phải điều gì đó tương tự...). Nhìn chung, hộp thoại cuộn trông cực kỳ lố bịch. Vì vậy, kết luận đã rõ ràng - chúng tôi loại bỏ các thanh cuộn!

    Window.showModalDialog("options_modal.html", 2,
    "dialogHeight:300px;dialogWidth:400px;scroll:no");

  • trạng thái - chỉ định sự hiện diện hay vắng mặt của dòng trạng thái trong hộp thoại. Giá trị có, 1 hoặc bật sẽ hiển thị dòng trạng thái trong cửa sổ, trong khi giá trị không, 0 hoặc tắt thì không hiển thị. Giá trị mặc định là không. Dòng trạng thái trong hộp thoại rõ ràng là một phụ kiện không cần thiết. Không một ứng dụng nào mà tác giả xử lý lại làm được những điều như vậy. Chúng tôi cũng sẽ không.
  • chưa trang trí - chỉ định xem hộp thoại có nên có đường viền, tiêu đề, menu hệ thống và các nút để phóng to, thu nhỏ và đóng, hoặc, như người ta nói bây giờ, crom. Giá trị có, 1 hoặc bật chỉ định sự vắng mặt của crom và giá trị không, 0 hoặc tắt chỉ định sự hiện diện của crom. Giá trị mặc định là không. Nói chung, bạn chỉ nên xóa chrome khỏi các hộp thoại phức tạp trong các ứng dụng phức tạp không kém. Một cửa sổ không có chrome trông cực kỳ khác thường và có thể khiến người dùng nản lòng.

Sau khi gọi phương thức showModalDialog, quá trình thực thi tập lệnh web sẽ dừng cho đến khi hộp thoại đóng lại. Việc thực thi sẽ chỉ tiếp tục sau khi cửa sổ được đóng lại.

Vẫn còn phải nói về kết quả mà phương thức showModalDialog trả về. Đây là giá trị được hộp thoại chuyển đến cửa sổ đã mở nó. Giá trị này có thể là bất kỳ loại nào: chuỗi, số, boolean, mảng, hàm hoặc một thể hiện của bất kỳ đối tượng nào.

Ghi chú:
Các cuộc gọi đến phương thức showModalDialog chỉ có thể xuất hiện trong các trình xử lý sự kiện xảy ra do hành động của người dùng (ví dụ: sự kiện nhấp chuột). Nếu không, lệnh gọi phương thức này sẽ bị bỏ qua.

3.2. Truyền một số dữ liệu tới hộp thoại phương thức khi nó mở ra
Rất thường xuyên, bạn cần chuyển một số dữ liệu vào hộp thoại phương thức mở ra. Ví dụ: đây có thể là giá trị hiện tại của các tham số cần được thay thế trong các điều khiển của cửa sổ này.

Chúng ta đã biết rằng chúng ta có thể chuyển một giá trị thuộc bất kỳ loại nào vào hộp thoại phương thức bằng cách đặt nó làm tham số thứ hai cho lệnh gọi phương thức showModalDialog.

Window.showModalDialog("options_modal.html", 2);
Nhưng nếu chúng ta cần truyền nhiều giá trị vào hộp thoại thì sao? Có hai cách để làm điều này.

Phương pháp một là tạo một mảng và đặt các giá trị được truyền vào các phần tử của nó.

Var aParams = true;
var aParams = "đen";

Ở đây chúng ta đã tạo một mảng aParams thông thường với hai phần tử đã được gán các giá trị được chuyển đến hộp thoại.

Chúng ta có thể tạo và mảng kết hợp(băm):

Var aParams["wrap"] = true;
var aParams["color"] = "đen";
window.showModalDialog("options_modal.html", aParams);
Có lẽ điều này thuận tiện hơn - các chỉ mục băm chuỗi dễ nhớ hơn các chỉ mục số của một mảng thông thường.

Phương pháp thứ hai là tạo một phiên bản của đối tượng Object bằng cách sử dụng trình khởi tạo JavaScript, tạo các thuộc tính trong đó và gán các giá trị được truyền cho chúng.

Var oParams = (wrap: true, color: "black" );
window.showModalDialog("options_modal.html", oParams);
Lựa chọn phương pháp nào là vấn đề sở thích. Ví dụ: tác giả thích các phiên bản Đối tượng hơn, coi chúng là phù hợp nhất cho mục đích này. Và một số người có thể thấy mảng thuận tiện hơn - mảng thông thường hoặc mảng băm.

3.3. Nhận trong hộp thoại phương thức, dữ liệu được truyền qua cửa sổ đã mở nó
Vì vậy, chúng tôi đã chuyển dữ liệu đến cửa sổ phương thức. Bây giờ chúng ta cần bằng cách nào đó đưa chúng vào chính cửa sổ này.

Đối tượng Window hỗ trợ thuộc tính voiceArguments chỉ đọc. Nó lưu trữ giá trị được truyền vào hộp thoại dưới dạng tham số thứ hai của phương thức showModalDialog. Đúng thứ chúng ta cần.

Ghi chú:
Thuộc tính hộp thoạiArguments chỉ có sẵn trong hộp thoại.

Đây là cách chúng ta có thể nhận các giá trị được chuyển dưới dạng phần tử băm:

Var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["color"];
Và đây là các giá trị được truyền dưới dạng thuộc tính của một thể hiện của đối tượng Object:

Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Truyền dữ liệu từ hộp thoại phương thức tới cửa sổ đã mở nó
Vẫn còn phải tìm ra cách chuyển dữ liệu sang hướng ngược lại- từ hộp thoại phương thức đến cửa sổ đã mở nó. Chúng ta sẽ phải trả về các giá trị mới do người dùng chỉ định từ hộp thoại tham số, phải không?

Bất kỳ giá trị nào cũng phải được chuyển từ hộp thoại tới cửa sổ đã mở nó chỉ khi người dùng nhấp vào nút OK. Nếu bạn bấm Hủy, bạn thường không cần thực hiện việc này; Nói chung, nút Hủy chỉ nên đóng hộp thoại và không thực hiện bất kỳ hành động nào khác.

Vì vậy, người dùng đã nhấp vào nút OK trong hộp thoại. Bây giờ chúng ta cần chuyển một số dữ liệu đến cửa sổ nơi hộp thoại được mở. Làm thế nào để làm nó?

Đối tượng Window hỗ trợ thuộc tính returnValue. Thuộc tính này lưu trữ giá trị cần được chuyển từ hộp thoại phương thức đến cửa sổ đã mở nó. Giá trị này có thể thuộc bất kỳ loại nào.

Ghi chú:
Thuộc tính returnValue chỉ khả dụng trong hộp thoại phương thức.

Ví dụ: đây là cách chúng ta có thể chuyển một giá trị từ cửa sổ mở ra:

Window.returnValue = 2;
Và như vậy - một số ý nghĩa:

Window.returnValue = ( bọc: bWrap, color: sColor );
Tất nhiên, trong trường hợp này chúng ta cũng có thể sử dụng mảng hoặc hàm băm thông thường.

Nếu người dùng nhấp vào nút Hủy trong hộp thoại, chúng tôi, như đã thỏa thuận trước đó, sẽ không gán bất kỳ giá trị nào cho thuộc tính returnValue. Trong trường hợp này, thuộc tính này sẽ nhận giá trị mặc định - null. Nhân tiện, điều tương tự sẽ xảy ra nếu người dùng đóng hộp thoại bằng cách nhấn nút đóng hoặc tổ hợp phím +.

Khỏe! Hộp thoại đã đóng (chúng ta sẽ tìm hiểu cách đóng nó sau). Bây giờ cửa sổ đã mở sẽ nhận giá trị của thuộc tính returnValue. Làm sao?

Rất đơn giản. Kết quả là giá trị thuộc tính returnValue sẽ được trả về bằng phương thức showModalDialog. Tuy nhiên, điều này đã được đề cập ở đoạn 2.1.

Chúng ta phải kiểm tra xem giá trị này có rỗng không. Nếu đúng như vậy thì hộp thoại không truyền bất kỳ dữ liệu nào. Nếu không, bằng cách nào đó chúng ta sẽ có thể sử dụng dữ liệu được truyền cho chúng trong ứng dụng.

Var oResult = window.showModalDialog(...);
if (oResult != null) (
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Đóng hộp thoại phương thức
Cuối cùng, chúng ta thực sự nên đóng hộp thoại phương thức. Để làm điều này, chúng ta có thể sử dụng một phương thức không chấp nhận tham số và không trả về kết quả. đóng đối tượng Cửa sổ.

Window.close();
3.6. Ứng dụng HTML có hỗ trợ hộp thoại phương thức
Chà, đã đến lúc thực hành thuần túy. Hãy hoàn thiện ứng dụng soạn thảo văn bản HTML của chúng tôi để nó hỗ trợ cài đặt các tham số bằng hộp thoại phương thức.

Mã của chính ứng dụng HTML (tệp Textedit_modal.hta) sau khi sửa sẽ trông như thế này:




Trình soạn thảo văn bản


window.resizeTo(710, 490);

Var bWrap = true;
var sColor = "đen";

Hàm showParameters()
{
var oParams = ( bọc: bWrap, color: sColor );
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:no");
if (oResult != null) (
bWrap = oResult.wrap;
sColor = oResult.color;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bWrap ? "mềm" : "tắt";
oTxtText.style.color = sColor;
}
}










Ở đây, về nguyên tắc, mọi thứ đều đã quen thuộc với chúng ta. Chỉ cần giải thích tối thiểu.

Trước hết, chúng ta đã khai báo hai biến - bWrap và sColor - sẽ lưu trữ các giá trị hiện tại của các tham số ứng dụng. Biến đầu tiên sẽ lưu trữ một giá trị logic - một dấu hiệu cho biết vùng chỉnh sửa có được thực thi trong khoảnh khắc này gói dòng. Và biến thứ hai sẽ lưu trữ giá trị hiện tại của màu văn bản trong vùng chỉnh sửa dưới dạng chuỗi.

Ghi chú:
Nói chung, các giá trị hiện tại của các tham số hoàn toàn không thể được lưu trữ ở bất kỳ đâu mà mỗi lần được lấy từ các thuộc tính tương ứng của phiên bản của đối tượng HTMLTextAreaElement, đại diện cho khu vực chỉnh sửa nơi văn bản được nhập. Tác giả chỉ đơn giản quyết định không làm phức tạp mã ứng dụng quá mức.

Một vùng chỉnh sửa được thể hiện bằng một phiên bản của đối tượng HTMLTextAreaElement. Đối tượng này hỗ trợ thuộc tính quấn, xác định chế độ ngắt dòng. Giá trị "mềm" của thuộc tính này hướng dẫn khu vực chỉnh sửa thực hiện ngắt dòng và dấu xuống dòng cũng như nguồn cấp dữ liệu dòng sẽ không được chèn tại dấu ngắt dòng ("ngắt dòng" mềm). Và giá trị "tắt" yêu cầu khu vực chỉnh sửa không ngắt dòng chút nào.

Tất cả các đối tượng đại diện cho các thành phần trang web đều hỗ trợ thuộc tính phong cách. Thuộc tính này lưu trữ một thể hiện của đối tượng CSSStyle đại diện cho kiểu hiện tại kiểu CSS, được liên kết với một thành phần trang web nhất định.

Ngược lại, đối tượng CSSStyle hỗ trợ nhiều thuộc tính tương ứng với các thuộc tính kiểu khác nhau. Do đó, thuộc tính màu tương ứng với thuộc tính style cùng tên, thuộc tính này chỉ định màu của văn bản.

Bây giờ hãy tạo một trang web thực hiện hộp thoại đó. Hãy đặt trên đó hộp kiểm Ngắt dòng văn bản, danh sách thả xuống Màu văn bản và tất nhiên là các nút OK và Hủy cần thiết cho các cửa sổ loại này.

Mã cho trang web này được đưa ra dưới đây.




Tùy chọn

thiết lập hàm()
{
var oParams = window.dialogArguments;

OChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}

Hàm sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = (wrap: oChkWrap.checked, color: oSelColor.value );
window.close();
}




Bao text


Văn bản màu

Đen
Màu đỏ
Màu xanh lá
Màu xanh da trời








Ở đây, một lần nữa, mọi thứ đã quen thuộc với chúng ta. Những lời giải thích tối thiểu nhất là cần thiết.

Thuộc tính SIZE của thẻ tạo danh sách chỉ định kích thước danh sách này tính bằng điểm. Giá trị 1 cho thuộc tính thẻ này chỉ định rằng danh sách phải cao một mục, nghĩa là danh sách này phải là danh sách thả xuống.

Thuộc tính VALUE của thẻ tạo một mục danh sách riêng biệt chỉ định giá trị của mục đó.

Ngay sau khi trang web triển khai hộp thoại tải xong, sự kiện tải sẽ xảy ra. Chúng tôi đã chỉ định hàm thiết lập làm trình xử lý cho sự kiện này. Hàm này sẽ nhận giá trị được truyền vào hộp thoại từ cửa sổ đã mở nó - một thể hiện của Đối tượng có thuộc tính lưu trữ các giá trị hiện tại trong cài đặt của ứng dụng. Sau đó, nó sẽ nhập các giá trị này vào các control tương ứng.

Đối tượng HTMLInputElement, đại diện cho một điều khiển, bao gồm hộp kiểm, hỗ trợ thuộc tính đã chọn, chỉ có sẵn cho các hộp kiểm. Thuộc tính này cho biết hộp kiểm được chọn (đúng) hay bị xóa (sai).

Đối tượng HTMLSelectElement, đại diện cho một danh sách, hỗ trợ thuộc tính giá trị. Nó chứa giá trị của mục danh sách hiện được chọn dưới dạng chuỗi. Bằng cách gán một giá trị cho thuộc tính này, chúng tôi sẽ yêu cầu danh sách ban đầu chọn một mục có giá trị đó.

Khi bạn nhấp vào nút OK, trình xử lý sự kiện nhấp chuột của nó sẽ được thực thi - hàm sendParams. Nó sẽ khởi tạo một Đối tượng bằng cách sử dụng trình khởi tạo JavaScript và đặt các thuộc tính của nó thành các giá trị mà người dùng đã chỉ định trong các điều khiển hộp thoại, các giá trị này sẽ trở thành các giá trị cài đặt ứng dụng mới. Nó sẽ chuyển phiên bản kết quả của đối tượng tới cửa sổ đã mở hộp thoại này, nghĩa là tới chính ứng dụng đó, sau đó đóng hộp thoại.

Nút Hủy chỉ đơn giản là đóng hộp thoại. Kết quả, cửa sổ mở hộp thoại này sẽ nhận giá trị null - tín hiệu cho thấy người dùng chưa xác nhận việc nhập tham số ứng dụng mới.

Hãy lưu trang web này vào file options_modal.html. Và hãy kiểm tra hoạt động của ứng dụng HTML đã hoàn thiện.

Thành phần hộp thoại HTML5 cung cấp chức năng trong hộp thoại trên trang web. Hộp thoại của thành phần hộp thoại nằm trong cây DOM và có thể được tạo kiểu bằng CSS thông thường.

Ví dụ đơn giản về thành phần hộp thoại Cửa sổ hộp thoại! Bản thân phần tử hộp thoại sẽ không hiển thị bất cứ điều gì một cách trực quan; bạn cần sử dụng API JavaScript để mở và đóng hộp thoại. API .show() và .close() Bằng cách sử dụng API .show() và .close() trên phần tử DOM của hộp thoại, bạn có thể mở và đóng hộp thoại.

Cửa sổ đối thoại!

Đóng Mở hộp thoại! hộp thoại var = document.querySelector("dialog"); document.querySelector("#show").onclick = function() ( hộp thoại.show(); ); document.querySelector("#close").onclick = function() ( hộp thoại.close(); );

Cửa sổ đối thoại!

Đóng Mở hộp thoại!

Kiểu cho hộp thoại Bạn có thể thêm kiểu tùy chỉnh cho thành phần hộp thoại theo cách tương tự như đối với các thành phần khối khác: điều hướng, div, chân trang, v.v. hộp thoại ( border: 1px Solid rgba(0, 0, 0, 0.3); bán kính đường viền: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); )

Tạo kiểu cho phần tử hộp thoại cũng dễ dàng như tạo kiểu cho div!

Đóng Mở hộp thoại kiểu

API Function.showModal()

Để tạo một hộp thoại dạng modal, bạn cần gọi hàm .showModal() thay vì .show() . Xin lưu ý rằng bạn không thể chọn văn bản trong lý lịch hoặc nhấp vào nút để chọn các nút trong hộp thoại mở.

Document.querySelector("#show").onclick = function() ( hộp thoại.showModal(); );

Lớp này nằm trên các cửa sổ phần tử khác, bất kể giá trị chỉ mục z, bao gồm cả các hộp thoại phương thức đã mở trước đó.

Nếu cần, bạn có thể đóng hộp thoại phương thức bằng phím “escape”!

Đóng

Thêm nền vào hộp thoại

Để tô màu nền, bạn có thể sử dụng pseudo-element::backdrop .

Dialog::backdrop ( vị trí: cố định; trên cùng: 0; trái: 0; phải: 0; dưới cùng: 0; màu nền: rgba(0, 0, 0, 0.8); )

Làm mờ nền bằng cách sử dụng ::backdrop . Nó làm nổi bật hộp thoại trong khi ẩn phần còn lại!

Đóng Mở hộp thoại có nền

Trả về giá trị từ hộp thoại

Bạn có thể chuyển đối số cho .close() . Hộp thoại trở lại đặt giá trị Properties.returnValue .

Mở một cuộc đối thoại!

Gửi cuộc đối thoại mở! document.querySelector("#close").onclick = function() ( var value = document.querySelector("#return_value").value; hộp thoại.close(value); ); document.querySelector("dialog").addEventListener("close", function() ( cảnh báo(this.returnValue); ))

Hộp thoại nhận đối số close(). Điều này sẽ được phản ánh trong .returnValue

Gửi hộp thoại Mở Ưu điểm của phần tử Tất nhiên, bạn có thể sử dụng thư viện jQuery hoặc JavaScript khác để có được kết quả này. Nhưng hộp thoại là phần tử HTML và bạn không cần kết nối thư viện của bên thứ ba để tạo hộp thoại bật lên.

Phần tử này cũng rất tốt cho khả năng tiếp cận. Trình duyệt hiểu rằng phần tử này có tính chất phương thức, vì vậy các công nghệ như trình đọc màn hình biết nội dung nào sẽ tương tác.

Ngoài ra, các hộp thoại phương thức được đặt khá có trật tự trong ngăn xếp "lớp trên cùng" và nằm trên các phần tử khác, bất kể thuộc tính chỉ mục z. Dựa vào chỉ mục z, việc đặt một hộp thoại theo chế độ lên đầu các trang web là điều khó khăn.

Chức vụ

Đối thoại có một số đặc điểm định vị đặc biệt. Theo mặc định, khi bạn gọi hộp thoại.show(), hộp thoại sẽ được căn giữa trong khung nhìn. Tất nhiên bạn có thể thay đổi điều này bằng cách sử dụng định vị CSS thông thường như top: 15px .

Và bạn cũng cần biết rằng định vị tuyệt đối hộp thoại, chỉ dành cho khối chứa vùng chứa ban đầu. Do đó, hộp thoại được định vị tuyệt đối không hiểu những thứ như vị trí, tràn và tỷ lệ phần trăm.

Thông số kỹ thuật bao gồm một neo định vị cho phép bạn neo hộp thoại vào một phần tử khác. Tuy nhiên, điều này vẫn chưa được triển khai trong Chrome.

Mở nhiều cửa sổ hộp thoại

Nếu các hộp thoại không có dạng thức, chúng sẽ hoạt động giống như nhiều phần tử. Đối với các phương thức, trình duyệt sẽ đẩy hộp thoại vào ngăn xếp. Phần trên cùng của ngăn xếp là một hộp thoại phương thức hoạt động chặn các trang còn lại của tài liệu. Bất cứ khi nào một hộp thoại phương thức được mở, nó sẽ được đẩy lên đầu ngăn xếp. Bất cứ khi nào một hộp thoại phương thức được đóng, nó sẽ bị xóa khỏi ngăn xếp. Các hộp thoại được hiển thị theo thứ tự xếp chồng nên hộp thoại đang hoạt động là cao nhất.

Các phần tử HTML5 mới và API JavaScript mới cho phép chúng tôi tạo ứng dụng phức tạp cho các trình duyệt. Một phần của bất kỳ ứng dụng hiện đại là các hộp thoại khác nhau. Chúng nhắc người dùng xác nhận một số hành động nhất định hoặc chỉ hiển thị thông báo. Với một yếu tố mới "" Bây giờ chúng ta có thể tạo các cửa sổ này bằng HTML5 thuần túy.

Đánh dấu đơn giản không có kiểu dáng

Phần tử có thể được đặt ở bất cứ đâu bên trong thẻ cơ thể trên trang HTML. Không nên đặt nó trong các đoạn văn bản -

, vì điều này có thể gây ra vấn đề hiển thị. Điều này rất có thể xảy ra với các phần tử có chứa yếu tố bổ sung và không chỉ những văn bản. Định nghĩa tài sản " mở" sẽ hiển thị hộp thoại khi trang được mở. Nếu không có thuộc tính này, cửa sổ sẽ ở chế độ Mẫu ban đầuđóng cửa.

Xin vui lòng đọc điều khoản sử dụng dịch vụ.

Điều khoản dịch vụ …

…

Trong ví dụ của chúng tôi, chúng tôi đã xác định một hộp thoại giữa hai đoạn văn. Vị trí này của phần tử đảm bảo rằng nó được hiển thị theo chiều ngang và chính giữa mà không tính đến dòng chảy của các phần tử khác. Theo chiều dọc, nó tính toán vị trí của nó so với đường viền trên cùng của cửa sổ trình duyệt. Nếu bạn hài lòng với điều này thì không cần CSS.

Nếu chế độ xem tiêu chuẩn không dành cho bạn, hãy thêm kiểu của riêng bạn và tùy chỉnh nó theo ý thích của bạn. Bạn có thể sử dụng bất kỳ Thuộc tính CSS cách tùy chỉnh các phần tử khối - được sử dụng nhiều nhất "bán kính đường viền" Và "bóng tối"để có thêm hiệu ứng.

Quản lý hộp thoại bằng JavaScript

Để mở và đóng một phần tử, hãy sử dụng Phương thức JavaScript trình diễn() Và đóng().

document.getElementsByTagName ("span" ) [ 0 ] .addEventListener ("click" , function () (
document.getElementsByTagName("dialog")[0].show();
) , SAI ) ;

Document.getElementsByTagName ("hộp thoại") [ 0 ] .addEventListener ("nhấp chuột" , function () (
this.close();
) , SAI ) ;

Trong ví dụ của chúng tôi, chúng tôi xác định hai sự kiện. Sự kiện đầu tiên khiến phần tử hộp thoại mở khi phần tử đầu tiên được nhấp vào . Nhấp vào hộp thoại đang mở sẽ đóng nó lại.

Hình dạng bên trong Phần tử hộp thoại

Một phần tử không chỉ có thể chứa văn bản đơn giản mà còn có thể chứa các phần tử bổ sung. Ví dụ, điều này cho phép chúng ta đặt một biểu mẫu bên trong hộp thoại. Xin lưu ý rằng thay vì phương pháp thông thường "bưu kiện" Và "lấy" bạn sẽ cần phải sử dụng một phương pháp đặc biệt" hộp thoại"để xử lý nội dung biểu mẫu.


Điều khoản dịch vụ của chúng tôi...

Chấp nhận
Từ chối

Trong ví dụ này, chúng tôi đã tạo một biểu mẫu có hai nút bên trong hộp thoại. Nhấp vào bất kỳ nút nào sẽ đóng thành phần hộp thoại. Không cần JavaScript ở đây. Nhưng nếu bạn muốn ngăn cửa sổ đóng khi nhấp chuột, bạn vẫn cần sử dụng JavaScript. Chỉ cần thêm sự kiện " nhấp chuột" cho một nút, điều này sẽ ngăn hành động mặc định của nút bằng "ngăn chặn Mặc định()".

Phản ứng khi đóng hộp thoại

Sự kiện "đóng" cho phép chúng ta phản ứng khi hộp thoại đóng lại.

document.getElementsByTagName ("hộp thoại") [ 0 ] .addEventListener ("đóng", hàm (e) (
var trả lời = cái này .returnValue ;
) , SAI ) ;

Tài sản "giá trị trả về" trả lại "giá trị"- giá trị của nút được sử dụng để đóng cửa sổ. Nếu trong ví dụ của chúng tôi, nút "Từ chối" được nhấp vào "Giá trị trả về" sẽ trả về giá trị "no" (value="no"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.!}

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

Nếu bạn muốn đảm bảo rằng không có nội dung nào khác trên trang HTML của bạn có thể được truy cập trong khi hộp thoại đang mở thì bạn có thể sử dụng hộp thoại phương thức. Chúng sẽ chỉ mở khi Trợ giúp về JavaScript và phương pháp của anh ấy" showModal()"Hộp thoại phương thức làm cho tất cả nội dung khác không hoạt động. Bạn không thể nhấp, thay đổi hoặc chọn nội dung không hoạt động.

document.getElementsByTagName("dialog")[0].showModal();

Không giống như các hộp thoại tiêu chuẩn, tùy chọn phương thức sẽ được căn giữa không chỉ theo chiều ngang mà còn theo chiều dọc.

Nếu bạn muốn sử dụng màu khác, bạn có thể sử dụng phần tử giả " ::phông nền"Đảm bảo bạn chọn màu có giá trị thấp" RGBA()" để tránh che giấu hoàn toàn nội dung.

hộp thoại: :backdrop (
nền: rgba(255, 0, 255, 0.25);
}

Trong ví dụ của chúng tôi, chúng tôi quyết định sử dụng màu vàng nhạt. Nếu muốn bạn có thể chọn hình nền thay vì màu sắc.

Hộp thoại phương thức luôn có thể được đóng bằng cách nhấn phím ESC. Điều này khiến cần phải thêm một sự kiện khác vào hộp thoại. Ngay khi sự kiện "đóng" hoạt động khi cửa sổ được đóng bằng nút biểu mẫu, hãy đảm bảo bạn thêm sự kiện "Hủy bỏ". Nó sẽ kích hoạt ngay khi cửa sổ phương thức được đóng bằng phím ESC.

document.getElementsByTagName ("hộp thoại") [ 0 ] .addEventListener ("hủy", hàm (e) (
var trả lời = "đã hủy";
) , SAI ) ;

Sử dụng nhiều phần tử Hộp thoại trên một trang

Nếu bạn có nhiều hơn một đối thoại mởđồng thời sử dụng các kiểu dáng để đảm bảo chúng không trùng nhau. Ngoại lệ đối với các cửa sổ phương thức, chúng sẽ luôn chặn nội dung khác và do đó sẽ không cho phép sử dụng nhiều hơn một cửa sổ phương thứcđồng thời.

Hỗ trợ trình duyệt

Hỗ trợ cho phần tử này vẫn chưa đủ phổ biến tại thời điểm viết bài này. Chỉ một Trình duyệt Chrome Và Cuộc đi săn diễn giải phần tử một cách chính xác. Tất cả các trình duyệt khác coi nó đơn giản phần tử khối, có nghĩa là chúng sẽ luôn hiển thị nội dung của nó bất kể thuộc tính có được đặt hay không "mở" hay không. Tình trạng hiện tại là có thể.


Nếu bạn có bất kỳ câu hỏi nào, chúng tôi khuyên bạn nên sử dụng

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, sự hỗ trợ của nó hiện tại rất 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 toàn bộ 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 hộp thoại theo chế độ. 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");