Đọc hướng dẫn JavaScript này và tìm hiểu cách tạo đăng nhập cửa sổ bật lên, liên hệ, nhiều thông tin đăng nhập cửa sổ bật lên trong một trang và các biểu mẫu khác trên trang web của bạn với các ví dụ.

Bạn đang xem : ví dụ về cửa sổ bật lên khi di chuột qua javascript

Biểu mẫu bật lên là một cách tuyệt vời để có hộp thoại trên trang web của bạn. Bạn có thể tạo biểu mẫu đăng nhập bật lên, biểu mẫu liên hệ hoặc bất kỳ loại biểu mẫu nào khác cho trang web của mình. Nút bật lên sẽ nằm ngay dưới tầm mắt của khách truy cập. Khi người dùng nhấp vào nút bật lên, biểu mẫu sẽ xuất hiện trên màn hình.

Tại đây, bạn có thể tìm hiểu cách tạo biểu mẫu bật lên bằng JavaScript.

Sử dụng display = “block” cho openForm () và display = “none” cho các hàm closeForm () để hiển thị và đóng biểu mẫu khi được nhấp:

  hàm openTheForm () {
  document.getElementById ("popupForm"). style.display = "block";
}

hàm closeTheForm () {
  document.getElementById ("popupForm"). style.display = "none";
}  
 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

* {

kích thước hộp

: border-box; }

. openBtn

{

display

: flex;

justify-content

: left; }

. openButton

{

border

: none;

border-radius

:

5px

;

background-color

:

# 1c87c9

;

color

: trắng;

padding

:

14px

20px

;

con trỏ

: con trỏ;

vị trí

: cố định; }

. loginPopup

{

vị trí

: tương đối;

text-align

: center;

width

:

100%

; }

. formPopup

{

display

: none;

vị trí

: cố định;

còn lại

:

45%

;

top

:

5%

;

biến đổi

:

dịch

(-

50%

,

5%

);

border

:

3px

solid

# 999999

;

z-index

:

9

; }

. formContainer

{

max-width

:

300px

;

padding

:

20px

;

background-color

:

# fff

; }

. formContainer

input

[type = văn bản]

,

. formContainer

input

[type = mật khẩu]

{

width

:

100%

;

padding

:

15px

;

margin

:

5px

0

20px

0

;

border

: none;

background

:

# eee

; }

. formContainer

input

[type = text]

: tiêu điểm

,

. formContainer

input

[type = mật khẩu]

: tiêu điểm

{

background-color

:

# ddd

;

outline

: none; }

. formContainer

. btn

{

padding

:

12px

20px

;

border

: none;

background-color

:

# 8ebf42

;

color

:

# fff

;

con trỏ

: con trỏ;

width

:

100%

;

margin-bottom

:

15px

;

độ mờ

:

0,8

; }

. formContainer

. hủy

{

background-color

:

# cc0000

; }

. formContainer

. btn

: hover

,

. openButton

: hover

{

độ mờ

:

1

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Biểu mẫu bật lên

& lt; /

h2

& gt;

& lt;

p

& gt;

Nhấp vào nút "Mở biểu mẫu" để mở biểu mẫu bật lên.

& lt; /

p

& gt;

& lt;

div

class

=

" openBtn "

& gt;

Nút

& lt;

class

=

" openButton "

onclick

=

" openForm () "

& gt;

& lt;

strong

& gt;

Biểu mẫu mở

& lt; / < p class = "hljs-name"> strong

& gt;

& lt; /

nút

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" loginPopup "

& gt;

& lt;

div

class

=

" formPopup "

id

=

" popupForm "

& gt;

& lt;

form

action

=

" / action_page.php "

class

=

" formContainer "

& gt;

& lt;

h2

& gt;

Vui lòng đăng nhập

& lt; / < p class = "hljs-name"> h2

& gt;

& lt;

label

cho

=

" email "

& gt;

& lt;

strong

& gt;

Email

& lt; / < p class = "hljs-name"> mạnh

& gt;

& lt; /

nhãn

& gt;

& lt;

input

type

=

" text "

id

=

" email "

trình giữ chỗ

=

" Email của bạn "

name

=

" email "

bắt buộc

& gt;

& lt;

label

cho

=

" psw "

& gt;

& lt;

strong

& gt;

Mật khẩu

& lt; /

mạnh mẽ

& gt;

& lt; /

nhãn

& gt;

& lt;

input

type

=

" password "

id

=

" psw "

placeholder

=

" Mật khẩu của bạn "

name

=

" psw "

bắt buộc

& gt;

Nút

& lt;

type

=

" submit "

class

=

" btn "

& gt;

Nhật ký trong nút

& lt; /

& gt;

Nút

& lt;

type

=

" button "

class

=

" btn hủy "

onclick

=

" closeForm () "

& gt;

Đóng

& lt; / < p class = "hljs-name"> nút

& gt;

& lt; /

biểu mẫu

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

script

& gt;

function

openForm

(

)

{

document

.getElementById (

"popupForm"

) .style.display =

"khối"

; }

function

closeForm

(

)

{

document

.getElementById (

"popupForm"

) .style.display =

"không"

; }

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Xem Thêm  C ++ Lặp lại qua mảng: Cách tốt nhất để thêm vòng lặp trong C ++ - c ++ lặp qua mảng

Cũng có thể tách hộp phương thức và đóng hộp bằng cách nhấp vào bất kỳ đâu bên ngoài hộp. Vì vậy, bạn chỉ cần sử dụng thuộc tính sự kiện đích trả về phần tử đã kích hoạt sự kiện:

  function openForm () {
  document.getElementById ("loginPopup"). style.display = "block";
}
hàm closeForm () {
  document.getElementById ("loginPopup"). style.display = "none";
}
// Khi người dùng nhấp vào bất kỳ đâu bên ngoài phương thức, hãy đóng nó
window.onclick = function (sự kiện) {
  let modal = document.getElementById ('loginPopup');
  if (event.target == modal) {
    closeForm ();
  }
}  

Không quá khó để có một số Biểu mẫu bật lên sử dụng thuộc tính toàn cục data- * . Thuộc tính data- * được sử dụng để lưu trữ dữ liệu tùy chỉnh riêng tư cho trang. Ở đây, chúng tôi sử dụng thuộc tính data-modal:

  

let

modalBtns =
 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. modal

{

display

: none;

vị trí

: cố định;

z-index

:

8

;

còn lại

:

0

;

top

:

0

;

width

:

100%

;

height

:

100%

;

tràn

: auto;

background-color

:

rgb

(

0

,

0

,

0

);

background-color

:

rgba

(

0

,

0

,

0

,

0.4

); }

. modal-content

{

margin

:

50px

auto;

border

:

1px

solid

# 999

;

width

:

60%

; }

h2

,

p

{

margin

:

0

0

20px

;

font-weight

:

400

;

color

:

# 999

; }

span

{

color

:

# 666

;

display

: block;

padding

:

0

0

5px

; }

biểu mẫu

{

padding

:

25px

;

margin

:

25px

;

box-shadow

:

0

2px

5px

# f5f5f5

;

background

:

# eee

; }

input

,

textarea

{

width

:

90%

;

padding

:

10px

;

margin-bottom

:

20px

;

border

:

1px

solid

# 1c87c9

;

outline

: none; } Nút

. contact-form

{

width

:

100%

;

padding

:

10px

;

border

: none;

background

:

# 1c87c9

;

font-size

:

16px

;

font-weight

:

400

;

color

:

# fff

; } Nút

: hover

{

background

:

# 2371a0

; }

. close

{

color

:

# aaa

;

float

: right;

font-size

:

28px

;

font-weight

: bold; }

. close

: hover

,

. close

: focus

{

color

: black;

text-decoration

: không có;

con trỏ

: con trỏ; } Nút

. nút

{

background

: không có;

border-top

: none;

outline

: none;

border-right

: không có;

border-left

: none;

border-bottom

:

# 02274a

1px

solid ;

padding

:

0

0

3px

0

;

font-size

:

16px

;

con trỏ

: con trỏ; } Nút

. nút

: hover < / p> {

border-bottom

:

# a99567

1px

solid ;

color

:

# a99567

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Nhiều biểu mẫu bật lên

& lt; / < p class = "hljs-name"> h2

& gt;

& lt;

p

& gt;

Nút

& lt;

class

=

" button "

data-modal

=

" modalOne "

& gt; Nút liên hệ với chúng tôi

& lt; /

& gt;

& lt; /

p

& gt;

& lt;

p

& gt;

Nút

& lt;

class

=

" button "

data-modal

=

" modalTwo "

& gt; Gửi biểu mẫu tuân thủ

& lt; /

nút

& gt;

& lt; /

p

& gt;

& lt;

div

id

=

" modalOne "

class

=

" modal "

& gt;

& lt;

div

class

=

" modal-content "

& gt;

& lt;

div

class

=

" contact-form "

& gt;

& lt;

a

class

=

" close "

& gt;

& amp; times;

& lt; /

a

& gt;

& lt;

form

action

=

" / "

& gt;

& lt;

h2

& gt;

Liên hệ với chúng tôi

& lt; /

h2

& gt;

& lt;

div

& gt;

& lt;

input

class

=

" fname "

type

=

" text "

name

=

" name "

placeholder

=

" Tên đầy đủ "

/ & gt;

& lt;

input

type

=

" text "

name

=

" name "

trình giữ chỗ

=

" Email "

/ & gt;

& lt;

input

type

=

" text "

name

=

" name "

trình giữ chỗ

=

" Số điện thoại "

/ & gt;

& lt;

input

type

=

" text "

name

=

" name "

trình giữ chỗ

=

" Trang web "

/ & gt;

& lt; /

div

& gt;

& lt;

span

& gt;

Thông báo

& lt; /

span

& gt;

& lt;

div

& gt;

& lt;

textarea

row

=

" 4 "

& gt;

& lt; /

textarea

& gt;

& lt; /

div

& gt;

Nút

& lt;

type

=

" submit "

href

=

" / "

& gt;

Gửi Nút

& lt; /

& gt;

& lt; /

biểu mẫu

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

id

=

" modalTwo "

class

=

" modal "

& gt;

& lt;

div

class

=

" modal-content "

& gt;

& lt;

div

class

=

" contact-form "

& gt;

& lt;

span

class

=

" close "

& gt;

& amp; times;

& lt; /

span

& gt;

& lt;

form

action

=

" / "

& gt;

& lt;

h2

& gt;

Biểu mẫu khiếu nại

& lt; /

h2

& gt;

& lt;

div

& gt;

& lt;

input

class

=

" fname "

type

=

" text "

name

=

" name "

placeholder

=

" Tên đầy đủ "

/ & gt;

& lt;

input

type

=

"text"

name

=

"name"

placeholder

=

"Email"

/ & gt;

& lt;

input

type

=

" text "

name

=

" name "

trình giữ chỗ

=

" Số điện thoại "

/ & gt;

& lt;

input

type

=

" text "

name

=

" name "

trình giữ chỗ

=

" Trang web "

/ & gt;

& lt; /

div

& gt;

& lt;

span

& gt;

Thông báo

& lt; /

span

& gt;

& lt;

div

& gt;

& lt;

textarea

row

=

" 4 "

& gt;

& lt; /

textarea

& gt;

& lt; /

div

& gt;

Nút

& lt;

type

=

" submit "

href

=

" / "

& gt;

Gửi Nút

& lt; /

& gt;

& lt; /

biểu mẫu

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

script

& gt;

let

modalBtns = [... document.querySelectorAll (

". button"

)]; modalBtns.forEach (

function

(

btn

)

{ btn.onclick =

function

(

)

{

let

modal = btn.getAttribute (

"data-modal"

);

document

.getElementById (modal) .style.display =

"block"

; }; });

let

closeBtns = [... document.querySelectorAll (

". close"

)]; closeBtns.forEach (

function

(

btn

)

{ btn.onclick =

function

(

)

{

let

modal = btn.closest (

". modal"

); modal.style.display =

"không có"

; }; });

window

.onclick =

function

(

sự kiện

)

{

if

(event.target.className ===

"modal"

) { event.target.style.display =

"none"

; } };

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Thuộc tính mục tiêu sự kiện

< / span> phase.


Xem thêm những thông tin liên quan đến chủ đề ví dụ về cửa sổ bật lên di chuột của javascript

hướng đối tượng javascript

  • Tác giả: Nguyễn Văn Duy PH 1 3 6 3 6
  • Ngày đăng: 2021-07-17
  • Đánh giá: 4 ⭐ ( 4429 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: hướng đối tượng javascript bài 4

Hiển thị cửa sổ bật lên khi di chuột qua, không nhấp vào bằng cách sử dụng Tờ rơi?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 4747 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nếu bạn cần hiển thị cửa sổ bật lên cho một điểm đánh dấu, bạn có…

[Tự học Javascript] Sự kiện chuột trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 8446 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong chương này, cafedev sẽ đi vào chi tiết hơn về các sự kiện chuột và thuộc tính của chúng.

5 ví dụ hay nhất về việc sử dụng cửa sổ bật lên trên trang web

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 5 ⭐ ( 9790 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]

    Bạn vẫn nghĩ rằng cửa sổ bật lên là không cần thiết và khó chịu trên các trang net? Hãy phá hỏng khuôn mẫu này

Code Javascript mở cửa sổ Popup Quảng cáo, tab mới khi click chuột

  • Tác giả: gocchiase.net
  • Đánh giá: 5 ⭐ ( 8968 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các Hộp thoại trong JavaScript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 7740 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học JavaScript này, bạn sẽ học cách tạo các hộp thoại (dialog box): alert, confirm và prompt

Cách xây dựng cửa sổ bật lên động (Menu nổi) trong Divi với Popper.js

  • Tác giả: codewatchers.com
  • Đánh giá: 5 ⭐ ( 1416 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã bao giờ nghe về thư viện có tên popper.js chưa? Thư viện này cho phép bạn tạo các cửa sổ bật lên trên JavaScript. Ngày nay, việc sử dụng popover khá phổ biến, đặc biệt là nó giúp hiển thị thê...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php