封面圖是蝦皮點了分享會彈出新的視窗~
日常網頁比較常用的是直接開新分頁，彈出小視窗比較少見一點
ex: "巴哈姆特的聊天室"
有想到某些網頁是類似的彈出視窗可以留言讓我知道唷~感恩!
某天...
PM: RD 大大我們偉大的客戶想了一個很神奇的新需求?
我: 拿尼!
PM: 他希望在 Table 點檢視按鈕彈出視窗
我: 視窗是指 Modal?
PM: 不是，是 window 的那個視窗
我: 這樣操作後台不是要不同視窗切換嗎?
PM: 對，但他們都習慣開多視窗比對資料~
我: .(๑¯ω¯๑)
首先下面這個是蠻常見的後台 Table-View
我們要將 Modal 改成 window(資料拋過去顯示)
以下是成果:
在 table 開新視窗的 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Table with Custom Window</title>
<script src="index.js"></script>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container mt-4">
<h2>Bootstrap 5 Table with Custom Window</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Category</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>Description of Item 1</td>
<td>Category A</td>
<td>$100</td>
<td>
<button
class="btn btn-primary"
onclick="openNewWindow({
name:'Item 1',
description:'Description of Item 1',
category:'Category A',
price:'$100',
stock:'50',
dateAdded:'2024-09-01'
})"
>
View
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>Description of Item 2</td>
<td>Category B</td>
<td>$200</td>
<td>
<button
class="btn btn-primary"
onclick="openNewWindow({
name:'Item 2',
description:'Description of Item 2',
category:'Category B',
price:'$200',
stock:'30',
dateAdded:'2024-09-02'
})"
>
View
</button>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
//index.js
function openNewWindow({
name,
description,
category,
price,
stock,
dateAdded,
}) {
console.log(name, description, category, price, stock, dateAdded);
// 新視窗設定檔
const windowFeatures = "left=800,top=100,width=320,height=320";
// 產生新視窗
const newWindow = window.open("", "_blank", windowFeatures);
// 動態生成 HTML 内容
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Window</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2 id="modalItemName">${name}</h2>
<p id="modalItemDescription">${description}</p>
<p><strong>Category:</strong> <span id="modalItemCategory">${category}</span></p>
<p><strong>Price:</strong> <span id="modalItemPrice">${price}</span></p>
<p><strong>Stock:</strong> <span id="modalItemStock">${stock}</span></p>
<p><strong>Date Added:</strong> <span id="modalItemDate">${dateAdded}</span></p>
</body>
</html>
`;
// 將 HTML 寫入
newWindow.document.write(htmlContent);
// 最後要關閉否則會一直轉圈圈
newWindow.document.close();
}
文件:
https://developer.mozilla.org/en-US/docs/Web/API/Window/open#windowfeatures
// 新視窗設定檔
const windowFeatures = "left=800,top=100,width=320,height=320";
// 產生新視窗
const newWindow = window.open("", "_blank", windowFeatures);
本文的範例比較單純沒有樣式
如果有指定的表單樣式，還要額外引入 css
// 將 HTML 寫入
newWindow.document.write(htmlContent);
// 最後要關閉否則會一直轉圈圈
newWindow.document.close();
iThome鐵人賽
看影片追技術