oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-17 21:55:31 +08:00
1 parent 27263365ad
commit 8eedf281fd
9 files changed
+338 -83
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/test.html
+68 -59
View File
@@ -1,64 +1,73 @@
# 驰诺国际货运有限公司
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dialog Multi-Level Demo</title>
<style>
dialog {
border: none;
border-radius: 8px;
padding: 20px;
width: 300px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<button id="openFirst">打开第一个弹窗</button>
<div style="text-align: center">订舱委托书</div>
<div class="dialog-wrapper" id="wrapper1" style="display: none">
<div class="backdrop"></div>
<dialog id="dialog1">
<p>这是第一个弹窗</p>
<button id="openSecond">打开第二个弹窗</button>
<button id="closeFirst">关闭</button>
</dialog>
</div>
公司编号：CNNYYY230108
<div class="dialog-wrapper" id="wrapper2" style="display: none">
<div class="backdrop"></div>
<dialog id="dialog2">
<p>这是第二个弹窗</p>
<button id="closeSecond">关闭</button>
</dialog>
</div>
<div style="text-align: center">
<table border="1">
<tbody>
<tr>
<td colspan="3">
发货人 JIANGXIARTSENCHEMICALCO.,LTD SULPHUR&PHOSPHORUS CHEMICAL BASE GUIXI,JIANGXI,P.R.CHINA
</td>
</tr>
<tr>
<td colspan="3">
收货人 ARTSEN?CHEMICAL?AMERICA?LLC 19?LOVELAND?STREET MADISON,?NJ?07940 T:?908-419-0704??F:973-520-8290
ATTN:?WALTER?CHENG
</td>
</tr>
<tr>
<td colspan="3">
通知人 ARTSEN?CHEMICAL?AMERICA?LLC 19?LOVELAND?STREET MADISON,?NJ?07940 T:?908-419-0704??F:973-520-8290
ATTN:?WALTER?CHENG
</td>
</tr>
<tr>
<td>船公司</td>
<td>船期 2023/01/20</td>
<td>航名／航次 XIN DA YANG ZHOU 086E</td>
</tr>
<tr>
<td>起运港 NINGBO, CHINA</td>
<td colspan="2">目的港 HOUSTON</td>
</tr>
</tbody>
</table>
</div>
<script>
const openFirstBtn = document.getElementById('openFirst')
const dialog1 = document.getElementById('dialog1')
const wrapper1 = document.getElementById('wrapper1')
const openSecondBtn = document.getElementById('openSecond')
const dialog2 = document.getElementById('dialog2')
const wrapper2 = document.getElementById('wrapper2')
const closeFirstBtn = document.getElementById('closeFirst')
const closeSecondBtn = document.getElementById('closeSecond')
<div style="text-align: center">
<table border="1">
<tbody>
<tr>
<td rowspan="3">唛头：NOMARK</td>
<td>TOTAL:</td>
<td>1</td>
<td></td>
<td>18000.00</td>
<td>30.00</td>
</tr>
<tr>
<td colspan="5">箱量：1X20'TKFCL</td>
</tr>
<tr>
<td colspan="5">运输条款：FREIGHTPREPAID</td>
</tr>
<tr>
<td colspan="6">备注：</td>
</tr>
</tbody>
</table>
</div>
// 打开第一个弹窗
openFirstBtn.addEventListener('click', () => {
wrapper1.style.display = 'block'
dialog1.show() // 注意：这里用 show() 而不是 showModal()
})
联系人：裘珊珊电话：0574-87237893QQ:1597608137传真：0574-87135310宁波市海曙区药行街42号银亿环球中心B座24楼
// 打开第二个弹窗
openSecondBtn.addEventListener('click', () => {
wrapper2.style.display = 'block'
dialog2.show() // 用 show() 避免冲突
})
// 关闭第一个弹窗
closeFirstBtn.addEventListener('click', () => {
dialog1.close()
wrapper1.style.display = 'none'
})
// 关闭第二个弹窗
closeSecondBtn.addEventListener('click', () => {
dialog2.close()
wrapper2.style.display = 'none'
})
</script>
</body>
</html>