Google sheet Apps script Web app – MODAL CURD HTML FORM

Giáo án link (giaoan.link) chia sẻ đến bạn project Google sheet Apps script Web app – MODAL CURD HTML FORM. Bạn sử dụng modal sẽ tạo một popup khi ta thao tác hàm hoặc click button. Trên cửa sổ hiện ra chúng ta có thể chèn form, thông báo hoặc các nội dung khác.

Điều kiện để bạn sử dụng modal này là phải sử dụng bootrap

Các bạn sử dụng code sau để bật modal, các vị trí cần thay đổi mình đã có ghi chú. Bạn có thể sử dụng code mẫu sau, xem video bên dưới để rõ hơn trong cách sử dụng.

Các project excel ứng dụng khác:

• Google sheet Apps script | Data Entry Form – Tự động đọc số tiền thành chữ ở trường input
• Google sheet Apps script | Cập nhật điểm lớp học – Theo danh sách lớp và Theo từng học sinh
• Google sheet, apps script Định dạng dấu phân cách hàng ngàn cho input
• Google sheet apps script | Chọn năm và kiểu biểu đồ để Load dữ liệu lên website
• Google sheet apps script | Scan QR code – Filter and get data table display on webapp
• Google sheet apps script Filter to get data to display on webapp, fill background color for data row
• Google sheet Apps script Webapp | Project Quản lý đơn hàng – Cập nhật sản phẩm – In phiếu kiểm soát
• Google sheet Apps script Webapp | Tạo QR Code động – Tự động load mã QR mới khi nội dung mã hóa đổi
• Googlesheet Apps script Webapp | Tạo trang trắc nghiệm online như Quiz
• Google sheet Apps script | Trang trắc nghiệm Quiz – Cập nhật câu hỏi, trả lời, thời gian đếm ngược

Mã code tham khảo

 <!-- Star modal form -->
      <div >
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">NỘI DUNG BUTTON</button>
      </div>
      <div style="height:5px;"></div>
      <!-- The Modal -->
      <div class="modal" id="myModal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">TIÊU ĐỀ MODAL</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
              
               NỘI DUNG CẦN HIỂN THỊ TRÊN MODAL

            </div>             
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>          
          </div>
        </div>
      </div>
       <!-- End modal form -->   

Xem video hướng dẫn