Kiến thức lập trình

Cách tạo biểu mẫu bật lên bằng JavaScript – ví dụ về cửa sổ bật lên di chuột của javascript

Byads_php

Th6 24, 2022

Đọ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

Related Post

Kiến thức lập trình

PHP – Echo
– br trong php là gì

Th6 29, 2022 ads_php
Kiến thức lập trình

Chỉ cho phép nhập số trong HTML – đầu vào số dạng html

Th6 29, 2022 ads_php
Kiến thức lập trình

Cách xem bảng trong SQL Server – xem dữ liệu trong cơ sở dữ liệu sql

Th6 29, 2022 ads_php

You missed

Kiến thức lập trình

PHP – Echo
– br trong php là gì

Th6 29, 2022 ads_php
Kiến thức lập trình

Chỉ cho phép nhập số trong HTML – đầu vào số dạng html

Th6 29, 2022 ads_php
Kiến thức lập trình

Cách xem bảng trong SQL Server – xem dữ liệu trong cơ sở dữ liệu sql

Th6 29, 2022 ads_php
Kiến thức lập trình

Cách tạo các bảng cạnh nhau – html hai bảng cạnh nhau với khoảng cách giữa

Th6 29, 2022 ads_php