27
4
CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.
Bài viết blog CFSDN này về cách tải trang trong cửa sổ bật lên bằng JS được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.
Một cửa sổ bật lên bật lên và tải trang. Vị trí ban đầu của cửa sổ bật lên được căn giữa. Nút trang chủ có thể được gọi lại khi cửa sổ đóng lại. Yêu cầu jquery.
Trình diễn hiệu ứng.
Đầu tiên, hãy minh họa chức năng của hai nút trên cửa sổ chính. Sau đó, bản demo gọi hai nút của cửa sổ chính khi đóng cửa sổ bật lên.
Đoạn code chính (mình viết vội nên không thêm chú thích, nhưng code rất đơn giản, chỉ cần tạo nhiều phần tử rồi ghép lại với nhau, mỗi phần tử đều được đánh dấu bằng var=).
。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
của chúng tôi
_divMặt nạ;
của chúng tôi
_Hộp div;
chức năng
Hiển thị mặt nạ() {
của chúng tôi
divMask = $(
''
)
.attr(
"nhận dạng"
,
"mặt nạ div"
)
.css({
"chức vụ"
:
"tuyệt đối"
,
"bên trái"
:
"0"
,
"đứng đầu"
:
"0"
,
"chiều rộng"
:
"100%"
,
"chiều cao"
:
"100%"
,
"Màu nền"
:
"xám"
,
"độ mờ đục"
:
"0,4"
}).thêm vào(
"thân hình"
);
_divMask = divMask;
trở lại
mặt nạ div;
}
chức năng
ShowBox(tiêu đề, url, chiều rộng, chiều cao) {
Hiển thị mặt nạ();
của chúng tôi
Hộp div = $(
""
)
.attr(
"nhận dạng"
,
"Hộp div"
)
.css({
"chức vụ"
:
"tuyệt đối"
,
"đứng đầu"
: (($(document).height() - chiều cao) / 2) < 0 ? 0 : (($(document).height() - chiều cao) / 2),
"bên trái"
: (($(document).width() - chiều rộng) / 2),
"chiều rộng"
: chiều rộng,
"chiều cao"
: chiều cao,
"ranh giới"
:
"2px màu xám đặc"
,
"Màu nền"
:
"trắng"
})
.appendTo(
"thân hình"
);
của chúng tôi
Tiêu đề = $(
"
)
.css({
"chiều rộng"
: (chiều rộng - 20) / 2,
"trôi nổi"
:
"bên trái"
,
"đệm"
:
"5px"
,
"lề"
:
"0"
})
.text(tiêu đề)
.appendTo(divBox);
của chúng tôi
pĐóng = $(
"
)
.css({
"chiều rộng"
: (chiều rộng - 20) / 2,
"trôi nổi"
:
"bên trái"
,
"căn chỉnh văn bản"
:
"Phải"
,
"đệm"
:
"5px"
,
"lề"
:
"0"
})
.appendTo(divBox);
.css({
"màu sắc"
:
"đen"
,
"trang trí văn bản"
:
"không có"
})
.attr(
"href"
,
"javascript:CloseBox();"
)
.chữ(
"đóng cửa"
)
.appendTo(pClose);
của chúng tôi
giờ = $(
"
)
.css({
"lề"
:
"0"
,
"ranh giới"
:
"1px màu xám đặc"
})
.appendTo(divBox);
của chúng tôi
iframeContainer = $(
""
)
.attr(
"nhận dạng"
,
"divContainer"
)
.css({
"chiều rộng"
: chiều rộng,
"chiều cao"
: chiều cao - 13 - pTitle.height(),
"trôi nổi"
:
"bên trái"
,
"tràn"
:
"tự động"
,
"ranh giới"
:
"0"
})
.attr(
"nguồn"
, url)
.appendTo(divBox);
_divBox = divBox;
//divBox.draggable({xử lý: "p" });
}
chức năng
Đóng hộp(btn) {
nếu như
(_divMặt nạ ==
vô giá trị
) {
nếu như
(btn !=
vô giá trị
&& btn !=
''
) {
parent.document.getElementById(btn).click();
}
$(cha mẹ.document.getElementById(
"mặt nạ div"
)).di dời();
$(cha mẹ.document.getElementById(
"Hộp div"
)).di dời();
}
khác
{
_divMask.remove();
_divBox.remove();
}
}
|
tải về.
Trên đây là toàn bộ nội dung bài viết này hi vọng nó sẽ giúp ích cho việc học của mọi người và cũng mong mọi người ủng hộ mình.
Liên kết gốc: https://www.cnblogs.com/David-Huang/p/3869293.html.
Cuối cùng, bài viết này về cách JS triển khai tải trang trong cửa sổ bật lên sẽ kết thúc tại đây. Nếu bạn muốn biết thêm về cách JS triển khai tải trang trong cửa sổ bật lên, vui lòng tìm kiếm các bài viết về CFSDN hoặc tiếp tục duyệt các bài viết liên quan. tất cả sẽ ủng hộ blog của tôi trong tương lai! .
27
4
0
Trung tâm cá nhân
Điều phát hành
từ bỏ
Tôi là một lập trình viên xuất sắc, rất giỏi!