Với sự kết hợp giữa html css js bạn có thể tạo ra modal thật đẹp bên dưới là ý tưởng và code mẫu
Tạo cho tôi 1 modal có chức năng hiển thị ra 1 danh sách request và thời gian request cũng như thời gian hoàn thành hiển thị dạng table, có message lỗi nếu request đó đồng bộ thất bại và message thành công đó thành công và danh sách gồm 20 api bằng html css javascript giao diện thật đẹp và linh hoạt, tiếng việt
Bên dưới là áp dụng vào thực tế
Dưới đây là một ví dụ về mã HTML, CSS và JavaScript để tạo một modal hiển thị danh sách các yêu cầu API với thời gian yêu cầu, thời gian hoàn thành và thông báo lỗi hoặc thành công.
Giao diện sẽ hiển thị dưới dạng bảng và bao gồm 20 API.
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Danh sách yêu cầu API</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button id="openModal">Hiển thị danh sách yêu cầu</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h2>Danh sách yêu cầu API</h2> <table id="requestTable"> <thead> <tr> <th>API</th> <th>Thời gian yêu cầu</th> <th>Thời gian hoàn thành</th> <th>Trạng thái</th> </tr> </thead> <tbody> <!-- Các dòng dữ liệu sẽ được thêm vào đây --> </tbody> </table> </div> </div> <script src="scripts.js"></script> </body> </html>
body { font-family: Arial, sans-serif; } button { padding: 10px 20px; font-size: 16px; margin: 20px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: modalopen 0.4s; } @keyframes modalopen { from {opacity: 0;} to {opacity: 1;} } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .success { color: green; } .error { color: red; }
document.getElementById('openModal').addEventListener('click', function() { document.getElementById('modal').style.display = 'block'; loadRequestData(); }); document.querySelector('.close-button').addEventListener('click', function() { document.getElementById('modal').style.display = 'none'; }); window.addEventListener('click', function(event) { if (event.target == document.getElementById('modal')) { document.getElementById('modal').style.display = 'none'; } }); function loadRequestData() { const requests = [ {api: 'API 1', requestTime: '2024-07-08 10:00:00', completionTime: '2024-07-08 10:01:00', status: 'success'}, {api: 'API 2', requestTime: '2024-07-08 10:02:00', completionTime: '2024-07-08 10:03:00', status: 'error'}, // Thêm 18 yêu cầu khác... ]; const tableBody = document.querySelector('#requestTable tbody'); tableBody.innerHTML = ''; requests.forEach(request => { const row = document.createElement('tr'); const apiCell = document.createElement('td'); apiCell.textContent = request.api; row.appendChild(apiCell); const requestTimeCell = document.createElement('td'); requestTimeCell.textContent = request.requestTime; row.appendChild(requestTimeCell); const completionTimeCell = document.createElement('td'); completionTimeCell.textContent = request.completionTime; row.appendChild(completionTimeCell); const statusCell = document.createElement('td'); statusCell.textContent = request.status === 'success' ? 'Thành công' : 'Thất bại'; statusCell.className = request.status === 'success' ? 'success' : 'error'; row.appendChild(statusCell); tableBody.appendChild(row); }); }
Khi bạn nhấp vào nút “Hiển thị danh sách yêu cầu”, modal sẽ hiển thị với danh sách các yêu cầu API, thời gian yêu cầu, thời gian hoàn thành và trạng thái của từng yêu cầu.
Bạn có thể tùy chỉnh danh sách requests trong mã JavaScript để hiển thị dữ liệu thực tế của bạn.
Dưới đây là phiên bản cập nhật của mã HTML, CSS và JavaScript để thêm số lượng sản phẩm và nút “Đồng bộ lại” vào bảng hiển thị yêu cầu API.
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Danh sách yêu cầu API</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button id="openModal">Hiển thị danh sách yêu cầu</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h2>Danh sách yêu cầu API</h2> <table id="requestTable"> <thead> <tr> <th>API</th> <th>Thời gian yêu cầu</th> <th>Thời gian hoàn thành</th> <th>Số lượng sản phẩm</th> <th>Trạng thái</th> <th>Hành động</th> </tr> </thead> <tbody> <!-- Các dòng dữ liệu sẽ được thêm vào đây --> </tbody> </table> </div> </div> <script src="scripts.js"></script> </body> </html>
body { font-family: Arial, sans-serif; } button { padding: 10px 20px; font-size: 16px; margin: 20px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: modalopen 0.4s; } @keyframes modalopen { from {opacity: 0;} to {opacity: 1;} } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .success { color: green; } .error { color: red; } .sync-button { padding: 5px 10px; background-color: #007bff; color: white; border: none; cursor: pointer; } .sync-button:hover { background-color: #0056b3; }
document.getElementById('openModal').addEventListener('click', function() { document.getElementById('modal').style.display = 'block'; loadRequestData(); }); document.querySelector('.close-button').addEventListener('click', function() { document.getElementById('modal').style.display = 'none'; }); window.addEventListener('click', function(event) { if (event.target == document.getElementById('modal')) { document.getElementById('modal').style.display = 'none'; } }); function loadRequestData() { const requests = [ {api: 'API 1', requestTime: '2024-07-08 10:00:00', completionTime: '2024-07-08 10:01:00', productQuantity: 5, status: 'success'}, {api: 'API 2', requestTime: '2024-07-08 10:02:00', completionTime: '2024-07-08 10:03:00', productQuantity: 3, status: 'error'}, // Thêm 18 yêu cầu khác... ]; const tableBody = document.querySelector('#requestTable tbody'); tableBody.innerHTML = ''; requests.forEach((request, index) => { const row = document.createElement('tr'); const apiCell = document.createElement('td'); apiCell.textContent = request.api; row.appendChild(apiCell); const requestTimeCell = document.createElement('td'); requestTimeCell.textContent = request.requestTime; row.appendChild(requestTimeCell); const completionTimeCell = document.createElement('td'); completionTimeCell.textContent = request.completionTime; row.appendChild(completionTimeCell); const productQuantityCell = document.createElement('td'); productQuantityCell.textContent = request.productQuantity; row.appendChild(productQuantityCell); const statusCell = document.createElement('td'); statusCell.textContent = request.status === 'success' ? 'Thành công' : 'Thất bại'; statusCell.className = request.status === 'success' ? 'success' : 'error'; row.appendChild(statusCell); const actionCell = document.createElement('td'); const syncButton = document.createElement('button'); syncButton.textContent = 'Đồng bộ lại'; syncButton.className = 'sync-button'; syncButton.addEventListener('click', function() { syncRequest(index); }); actionCell.appendChild(syncButton); row.appendChild(actionCell); tableBody.appendChild(row); }); } function syncRequest(index) { // Logic đồng bộ lại yêu cầu API tại đây alert('Đang đồng bộ lại yêu cầu thứ ' + (index + 1)); }
Khi bạn nhấp vào nút “Hiển thị danh sách yêu cầu”, modal sẽ hiển thị với danh sách các yêu cầu API, thời gian yêu cầu, thời gian hoàn thành, số lượng sản phẩm, trạng thái của từng yêu cầu và nút “Đồng bộ lại” cho mỗi yêu cầu.
Bạn có thể tùy chỉnh danh sách requests trong mã JavaScript để hiển thị dữ liệu thực tế của bạn.
Nút “Đồng bộ lại” hiện chỉ hiển thị thông báo, bạn có thể thay thế bằng logic đồng bộ thực tế.
Để hiển thị bảng dưới dạng session, trong đó mỗi session là một batch gồm nhiều item, bạn có thể tổ chức dữ liệu theo cấu trúc lồng nhau và điều chỉnh giao diện để phản ánh cấu trúc này.
Dưới đây là ví dụ về cách bạn có thể thực hiện điều này.
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Danh sách yêu cầu API</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button id="openModal">Hiển thị danh sách yêu cầu</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h2>Danh sách yêu cầu API</h2> <div id="sessionsContainer"> <!-- Các session sẽ được thêm vào đây --> </div> </div> </div> <script src="scripts.js"></script> </body> </html>
body { font-family: Arial, sans-serif; } button { padding: 10px 20px; font-size: 16px; margin: 20px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: modalopen 0.4s; } @keyframes modalopen { from {opacity: 0;} to {opacity: 1;} } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } .session { margin-bottom: 20px; } .session h3 { margin-top: 0; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .success { color: green; } .error { color: red; } .sync-button { padding: 5px 10px; background-color: #007bff; color: white; border: none; cursor: pointer; } .sync-button:hover { background-color: #0056b3; }
document.getElementById('openModal').addEventListener('click', function() { document.getElementById('modal').style.display = 'block'; loadSessionData(); }); document.querySelector('.close-button').addEventListener('click', function() { document.getElementById('modal').style.display = 'none'; }); window.addEventListener('click', function(event) { if (event.target == document.getElementById('modal')) { document.getElementById('modal').style.display = 'none'; } }); function loadSessionData() { const sessions = [ { sessionName: 'Session 1', items: [ {api: 'API 1', requestTime: '2024-07-08 10:00:00', completionTime: '2024-07-08 10:01:00', productQuantity: 5, status: 'success'}, {api: 'API 2', requestTime: '2024-07-08 10:02:00', completionTime: '2024-07-08 10:03:00', productQuantity: 3, status: 'error'} ] }, { sessionName: 'Session 2', items: [ {api: 'API 3', requestTime: '2024-07-08 10:04:00', completionTime: '2024-07-08 10:05:00', productQuantity: 8, status: 'success'}, {api: 'API 4', requestTime: '2024-07-08 10:06:00', completionTime: '2024-07-08 10:07:00', productQuantity: 6, status: 'error'} ] } // Thêm các session khác... ]; const sessionsContainer = document.getElementById('sessionsContainer'); sessionsContainer.innerHTML = ''; sessions.forEach((session, sessionIndex) => { const sessionDiv = document.createElement('div'); sessionDiv.className = 'session'; const sessionTitle = document.createElement('h3'); sessionTitle.textContent = session.sessionName; sessionDiv.appendChild(sessionTitle); const table = document.createElement('table'); const thead = document.createElement('thead'); thead.innerHTML = ` <tr> <th>API</th> <th>Thời gian yêu cầu</th> <th>Thời gian hoàn thành</th> <th>Số lượng sản phẩm</th> <th>Trạng thái</th> <th>Hành động</th> </tr> `; table.appendChild(thead); const tbody = document.createElement('tbody'); session.items.forEach((item, itemIndex) => { const row = document.createElement('tr'); const apiCell = document.createElement('td'); apiCell.textContent = item.api; row.appendChild(apiCell); const requestTimeCell = document.createElement('td'); requestTimeCell.textContent = item.requestTime; row.appendChild(requestTimeCell); const completionTimeCell = document.createElement('td'); completionTimeCell.textContent = item.completionTime; row.appendChild(completionTimeCell); const productQuantityCell = document.createElement('td'); productQuantityCell.textContent = item.productQuantity; row.appendChild(productQuantityCell); const statusCell = document.createElement('td'); statusCell.textContent = item.status === 'success' ? 'Thành công' : 'Thất bại'; statusCell.className = item.status === 'success' ? 'success' : 'error'; row.appendChild(statusCell); const actionCell = document.createElement('td'); const syncButton = document.createElement('button'); syncButton.textContent = 'Đồng bộ lại'; syncButton.className = 'sync-button'; syncButton.addEventListener('click', function() { syncRequest(sessionIndex, itemIndex); }); actionCell.appendChild(syncButton); row.appendChild(actionCell); tbody.appendChild(row); }); table.appendChild(tbody); sessionDiv.appendChild(table); sessionsContainer.appendChild(sessionDiv); }); } function syncRequest(sessionIndex, itemIndex) { // Logic đồng bộ lại yêu cầu API tại đây alert('Đang đồng bộ lại yêu cầu thứ ' + (itemIndex + 1) + ' trong Session ' + (sessionIndex + 1)); }
Khi bạn nhấp vào nút “Hiển thị danh sách yêu cầu”, modal sẽ hiển thị với danh sách các session, mỗi session chứa nhiều yêu cầu API với thời gian yêu cầu, thời gian hoàn thành, số lượng sản phẩm, trạng thái của từng yêu cầu và nút “Đồng bộ lại” cho mỗi yêu cầu.
Bạn có thể tùy chỉnh danh sách sessions trong mã JavaScript để hiển thị dữ liệu thực tế của bạn.
Nút “Đồng bộ lại” hiện chỉ hiển thị thông báo, bạn có thể thay thế bằng logic đồng bộ thực tế.
#Mtips5s #Contact
Fanpage: https://www.facebook.com/mtipscoder
Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder
Website: https://mtips5s.com
Youtube: https://mtips5s.com
Twitter(X): @takagiks99
Instagram: @khuongkara
Threads: @khuongkara
Google Maps: @khuongkara
#Base Code #Souce Code
Bộ công cụ My Self: @tools.mtips5s.com
Github: @github
Npm: @npm
Docker: @docker
Chúc các bạn thành công!
Leave A Comment