qc-all-third-party-one-card-demo.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>第三方质检 · 全公司合并为一卡 — Demo</title>
  7. <style>
  8. :root {
  9. --primary: #10b981;
  10. --primary-dark: #059669;
  11. --primary-bg: #ecfdf5;
  12. --text: #0f172a;
  13. --muted: #64748b;
  14. --border: #e2e8f0;
  15. --panel: #fff;
  16. --page: #f1f5f9;
  17. --warn: #d97706;
  18. --danger: #dc2626;
  19. }
  20. * { box-sizing: border-box; }
  21. body {
  22. margin: 0;
  23. font-family: Inter, "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  24. font-size: 14px;
  25. line-height: 1.5;
  26. color: var(--text);
  27. background: var(--page);
  28. padding: 24px;
  29. }
  30. h1 {
  31. margin: 0 0 8px;
  32. font-size: 20px;
  33. font-weight: 700;
  34. }
  35. .lead {
  36. margin: 0 0 20px;
  37. color: var(--muted);
  38. max-width: 920px;
  39. }
  40. .compare {
  41. display: grid;
  42. grid-template-columns: 1fr 1fr;
  43. gap: 16px;
  44. margin-bottom: 20px;
  45. }
  46. @media (max-width: 960px) {
  47. .compare { grid-template-columns: 1fr; }
  48. }
  49. .panel {
  50. background: var(--panel);
  51. border: 1px solid var(--border);
  52. border-radius: 10px;
  53. padding: 16px;
  54. }
  55. .panel-head {
  56. display: flex;
  57. align-items: center;
  58. justify-content: space-between;
  59. gap: 8px;
  60. margin-bottom: 12px;
  61. padding-bottom: 10px;
  62. border-bottom: 1px solid var(--border);
  63. }
  64. .panel-head h2 {
  65. margin: 0;
  66. font-size: 15px;
  67. display: flex;
  68. align-items: center;
  69. gap: 8px;
  70. }
  71. .panel-head h2::before {
  72. content: "";
  73. width: 3px;
  74. height: 14px;
  75. border-radius: 2px;
  76. background: var(--primary);
  77. }
  78. .badge {
  79. display: inline-flex;
  80. align-items: center;
  81. padding: 2px 8px;
  82. border-radius: 999px;
  83. font-size: 12px;
  84. font-weight: 600;
  85. }
  86. .badge-old { background: #f1f5f9; color: var(--muted); }
  87. .badge-new { background: var(--primary-bg); color: var(--primary-dark); }
  88. .batch-hint {
  89. font-size: 12px;
  90. color: var(--muted);
  91. margin-bottom: 10px;
  92. }
  93. .cards {
  94. display: grid;
  95. grid-template-columns: 1fr 1fr;
  96. gap: 10px;
  97. }
  98. .card {
  99. border: 1px solid var(--border);
  100. border-radius: 8px;
  101. padding: 12px;
  102. background: #fff;
  103. cursor: default;
  104. min-height: 88px;
  105. display: flex;
  106. flex-direction: column;
  107. gap: 8px;
  108. }
  109. .card--lab { background: #fafafa; }
  110. .card--company {
  111. border-color: #a7f3d0;
  112. background: linear-gradient(180deg, #f0fdf4 0%, #fff 48%);
  113. }
  114. .card--clickable {
  115. cursor: pointer;
  116. transition: box-shadow .15s, border-color .15s;
  117. }
  118. .card--clickable:hover {
  119. border-color: var(--primary);
  120. box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
  121. }
  122. .card--clickable:focus-visible {
  123. outline: 2px solid var(--primary);
  124. outline-offset: 2px;
  125. }
  126. .card__name {
  127. font-weight: 600;
  128. font-size: 14px;
  129. color: #1e293b;
  130. }
  131. .card__sub {
  132. font-size: 12px;
  133. color: var(--muted);
  134. }
  135. .card__tags {
  136. display: flex;
  137. flex-wrap: wrap;
  138. gap: 6px;
  139. }
  140. .tag {
  141. display: inline-flex;
  142. padding: 1px 7px;
  143. border-radius: 4px;
  144. font-size: 12px;
  145. line-height: 1.6;
  146. }
  147. .tag.success { background: var(--primary-bg); color: var(--primary-dark); }
  148. .tag.warning { background: #fff7ed; color: var(--warn); }
  149. .tag.info { background: #f1f5f9; color: #475569; }
  150. .tag.primary { background: #eff6ff; color: #2563eb; }
  151. .card__foot {
  152. display: flex;
  153. align-items: center;
  154. justify-content: space-between;
  155. gap: 8px;
  156. margin-top: auto;
  157. }
  158. .assignees { font-size: 12px; color: var(--muted); }
  159. .btn {
  160. appearance: none;
  161. border: 1px solid var(--border);
  162. background: #fff;
  163. color: var(--text);
  164. border-radius: 8px;
  165. height: 28px;
  166. padding: 0 10px;
  167. font-size: 12px;
  168. cursor: pointer;
  169. display: inline-flex;
  170. align-items: center;
  171. gap: 4px;
  172. }
  173. .btn-main {
  174. background: var(--primary);
  175. border-color: var(--primary);
  176. color: #fff;
  177. }
  178. .note {
  179. margin-top: 12px;
  180. padding: 10px 12px;
  181. border-radius: 8px;
  182. background: #fffbeb;
  183. border: 1px solid #fde68a;
  184. color: #92400e;
  185. font-size: 13px;
  186. }
  187. .note strong { font-weight: 600; }
  188. .arrow-row {
  189. text-align: center;
  190. color: var(--muted);
  191. font-size: 13px;
  192. margin: 4px 0 16px;
  193. }
  194. /* Dialog mock */
  195. .overlay {
  196. position: fixed;
  197. inset: 0;
  198. background: rgba(15, 23, 42, .45);
  199. display: none;
  200. align-items: center;
  201. justify-content: center;
  202. padding: 24px;
  203. z-index: 50;
  204. }
  205. .overlay.is-open { display: flex; }
  206. .dialog {
  207. width: min(920px, 100%);
  208. max-height: calc(100vh - 48px);
  209. background: #fff;
  210. border-radius: 10px;
  211. display: flex;
  212. flex-direction: column;
  213. overflow: hidden;
  214. box-shadow: 0 20px 50px rgba(15, 23, 42, .2);
  215. }
  216. .dialog__head {
  217. padding: 14px 20px;
  218. border-bottom: 1px solid var(--border);
  219. display: flex;
  220. align-items: center;
  221. justify-content: space-between;
  222. gap: 12px;
  223. }
  224. .dialog__title { font-size: 16px; font-weight: 650; margin: 0; }
  225. .dialog__body {
  226. padding: 16px 20px;
  227. overflow: auto;
  228. background: #f8fafc;
  229. }
  230. .dialog__foot {
  231. padding: 12px 20px;
  232. border-top: 1px solid var(--border);
  233. display: flex;
  234. justify-content: flex-end;
  235. gap: 8px;
  236. background: #fff;
  237. }
  238. .item-block {
  239. background: #fafafa;
  240. border-radius: 8px;
  241. padding: 16px 18px;
  242. margin-bottom: 12px;
  243. border: 1px solid #f1f5f9;
  244. }
  245. .item-block__head {
  246. display: flex;
  247. align-items: center;
  248. justify-content: space-between;
  249. gap: 12px;
  250. margin-bottom: 12px;
  251. }
  252. .item-block__name {
  253. font-size: 15px;
  254. font-weight: 600;
  255. color: #1e293b;
  256. min-width: 0;
  257. }
  258. .item-block__company {
  259. color: var(--muted);
  260. font-weight: 500;
  261. font-size: 13px;
  262. }
  263. .section-title {
  264. position: relative;
  265. font-size: 12px;
  266. font-weight: 600;
  267. color: #334155;
  268. margin: 0 0 10px;
  269. padding: 0 0 8px 8px;
  270. border-bottom: 1px solid #ebeef5;
  271. }
  272. .section-title::before {
  273. content: "";
  274. position: absolute;
  275. left: 0;
  276. top: 3px;
  277. width: 2px;
  278. height: 10px;
  279. border-radius: 1px;
  280. background: #047857;
  281. }
  282. .grid-2 {
  283. display: grid;
  284. grid-template-columns: 1fr 1fr;
  285. gap: 12px;
  286. }
  287. .field label {
  288. display: block;
  289. font-size: 12px;
  290. color: #475569;
  291. margin-bottom: 6px;
  292. }
  293. .radios {
  294. display: flex;
  295. flex-wrap: wrap;
  296. gap: 12px;
  297. font-size: 13px;
  298. }
  299. .shared {
  300. background: #fafafa;
  301. border-radius: 8px;
  302. padding: 16px 18px;
  303. border: 1px solid #f1f5f9;
  304. }
  305. textarea, .fake-upload {
  306. width: 100%;
  307. border: 1px solid var(--border);
  308. border-radius: 8px;
  309. padding: 8px 10px;
  310. font: inherit;
  311. background: #fff;
  312. }
  313. .fake-upload {
  314. min-height: 72px;
  315. color: var(--muted);
  316. display: flex;
  317. align-items: center;
  318. justify-content: center;
  319. border-style: dashed;
  320. border-color: #a7f3d0;
  321. background: #f0fdf4;
  322. }
  323. .close-x {
  324. border: none;
  325. background: transparent;
  326. font-size: 20px;
  327. line-height: 1;
  328. color: var(--muted);
  329. cursor: pointer;
  330. padding: 4px 8px;
  331. }
  332. .legend {
  333. display: flex;
  334. flex-wrap: wrap;
  335. gap: 10px 16px;
  336. margin-bottom: 16px;
  337. font-size: 13px;
  338. color: var(--muted);
  339. }
  340. .legend span { display: inline-flex; align-items: center; gap: 6px; }
  341. .swatch {
  342. width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border);
  343. }
  344. .swatch.lab { background: #fafafa; }
  345. .swatch.tp { background: #f0fdf4; border-color: #a7f3d0; }
  346. </style>
  347. </head>
  348. <body>
  349. <h1>第三方质检 · 全公司合并为一张卡</h1>
  350. <p class="lead">
  351. 需求示意:列表里不再「一家公司一张卡」,改为批次内所有第三方任务合成 <strong>一张「第三方质检项目」卡</strong>;
  352. 点击后弹窗列出全部第三方检测项目,项目名后带上公司名。检测参数区保持隐藏(仅状态/结论 + 共享备注材料)。
  353. </p>
  354. <div class="legend">
  355. <span><i class="swatch lab"></i>实验室自检(仍一项目一卡)</span>
  356. <span><i class="swatch tp"></i>第三方聚合卡</span>
  357. <span>右侧提案卡可点击打开弹窗 Demo</span>
  358. </div>
  359. <div class="compare">
  360. <!-- 现状 -->
  361. <section class="panel">
  362. <div class="panel-head">
  363. <h2>现状 · 按公司分卡</h2>
  364. <span class="badge badge-old">当前实现</span>
  365. </div>
  366. <div class="batch-hint">检测批次 A · 任务区</div>
  367. <div class="cards">
  368. <div class="card card--lab">
  369. <div class="card__name">细胞活力检测</div>
  370. <div class="card__tags">
  371. <span class="tag warning">进行中</span>
  372. <span class="tag info">实验室自检</span>
  373. </div>
  374. <div class="card__foot">
  375. <span class="assignees">张三</span>
  376. <button class="btn btn-main" type="button" tabindex="-1">填写结果</button>
  377. </div>
  378. </div>
  379. <div class="card card--company">
  380. <div class="card__name">金域医学</div>
  381. <div class="card__sub">第三方 · 2 个检测项目</div>
  382. <div class="card__tags">
  383. <span class="tag warning">1/2 已完成</span>
  384. <span class="tag primary">第三方检测</span>
  385. </div>
  386. <div class="card__foot">
  387. <span class="assignees">李四、王五</span>
  388. <button class="btn btn-main" type="button" tabindex="-1">填写结果</button>
  389. </div>
  390. </div>
  391. <div class="card card--company">
  392. <div class="card__name">迪安诊断</div>
  393. <div class="card__sub">第三方 · 1 个检测项目</div>
  394. <div class="card__tags">
  395. <span class="tag info">0/1 已完成</span>
  396. <span class="tag primary">第三方检测</span>
  397. </div>
  398. <div class="card__foot">
  399. <span class="assignees">赵六</span>
  400. <button class="btn btn-main" type="button" tabindex="-1">填写结果</button>
  401. </div>
  402. </div>
  403. <div class="card card--company">
  404. <div class="card__name">华大基因</div>
  405. <div class="card__sub">第三方 · 2 个检测项目</div>
  406. <div class="card__tags">
  407. <span class="tag success">2/2 已完成</span>
  408. <span class="tag primary">第三方检测</span>
  409. </div>
  410. <div class="card__foot">
  411. <span class="assignees">钱七</span>
  412. <button class="btn" type="button" tabindex="-1">查看</button>
  413. </div>
  414. </div>
  415. </div>
  416. <p class="note"><strong>痛点:</strong>公司多时卡片碎;要分别点开多家公司弹窗才能填完。</p>
  417. </section>
  418. <!-- 提案 -->
  419. <section class="panel">
  420. <div class="panel-head">
  421. <h2>提案 · 全第三方合一卡</h2>
  422. <span class="badge badge-new">需求方向</span>
  423. </div>
  424. <div class="batch-hint">检测批次 A · 任务区 · 点击绿色卡体验弹窗</div>
  425. <div class="cards">
  426. <div class="card card--lab">
  427. <div class="card__name">细胞活力检测</div>
  428. <div class="card__tags">
  429. <span class="tag warning">进行中</span>
  430. <span class="tag info">实验室自检</span>
  431. </div>
  432. <div class="card__foot">
  433. <span class="assignees">张三</span>
  434. <button class="btn btn-main" type="button" tabindex="-1">填写结果</button>
  435. </div>
  436. </div>
  437. <div
  438. class="card card--company card--clickable"
  439. id="open-dialog-card"
  440. role="button"
  441. tabindex="0"
  442. data-option="open-all-third-dialog"
  443. aria-label="打开第三方质检项目弹窗"
  444. >
  445. <div class="card__name">第三方质检项目</div>
  446. <div class="card__sub">第三方 · 5 个检测项目 · 3 家公司</div>
  447. <div class="card__tags">
  448. <span class="tag warning">3/5 已完成</span>
  449. <span class="tag primary">第三方检测</span>
  450. </div>
  451. <div class="card__foot">
  452. <span class="assignees">李四、王五、赵六、钱七</span>
  453. <button class="btn btn-main" type="button" id="open-dialog-btn">填写结果</button>
  454. </div>
  455. </div>
  456. </div>
  457. <p class="note"><strong>目标:</strong>一张卡汇总全部第三方;弹窗内项目名后标注公司,一次填完本批次可见的第三方任务。</p>
  458. </section>
  459. </div>
  460. <p class="arrow-row">下方为弹窗结构说明(也可点右侧卡片打开可交互层)</p>
  461. <!-- static preview of dialog content -->
  462. <section class="panel" style="max-width: 920px; margin: 0 auto;">
  463. <div class="panel-head">
  464. <h2>弹窗结构预览 · 填写检测结果 · 第三方质检项目</h2>
  465. <button class="btn btn-main" type="button" id="open-dialog-btn-2">打开可交互弹窗</button>
  466. </div>
  467. <div class="item-block">
  468. <div class="item-block__head">
  469. <div class="item-block__name">
  470. 1. HIV-1 RNA 定量
  471. <span class="item-block__company">· 金域医学</span>
  472. </div>
  473. <span class="tag warning">待执行</span>
  474. </div>
  475. <div class="section-title">检测结论</div>
  476. <div class="grid-2">
  477. <div class="field"><label>任务状态</label><div class="radios">○ 待执行 ● 已完成</div></div>
  478. <div class="field"><label>结论</label><div class="radios">○ 待结论 ● 通过 ○ 不通过</div></div>
  479. </div>
  480. </div>
  481. <div class="item-block">
  482. <div class="item-block__head">
  483. <div class="item-block__name">
  484. 2. 乙肝五项
  485. <span class="item-block__company">· 金域医学</span>
  486. </div>
  487. <span class="tag success">已完成</span>
  488. </div>
  489. <div class="section-title">检测结论</div>
  490. <div class="grid-2">
  491. <div class="field"><label>任务状态</label><div class="radios">○ 待执行 ● 已完成</div></div>
  492. <div class="field"><label>结论</label><div class="radios">○ 待结论 ● 通过 ○ 不通过</div></div>
  493. </div>
  494. </div>
  495. <div class="item-block">
  496. <div class="item-block__head">
  497. <div class="item-block__name">
  498. 3. 支原体检测
  499. <span class="item-block__company">· 迪安诊断</span>
  500. </div>
  501. <span class="tag info">待执行</span>
  502. </div>
  503. <div class="section-title">检测结论</div>
  504. <div class="grid-2">
  505. <div class="field"><label>任务状态</label><div class="radios">● 待执行 ○ 已完成</div></div>
  506. <div class="field"><label>结论</label><div class="radios">● 待结论 ○ 通过 ○ 不通过</div></div>
  507. </div>
  508. </div>
  509. <div class="item-block">
  510. <div class="item-block__head">
  511. <div class="item-block__name">
  512. 4. 染色体核型分析
  513. <span class="item-block__company">· 华大基因</span>
  514. </div>
  515. <span class="tag success">已完成</span>
  516. </div>
  517. </div>
  518. <div class="item-block">
  519. <div class="item-block__head">
  520. <div class="item-block__name">
  521. 5. STR 比对
  522. <span class="item-block__company">· 华大基因</span>
  523. </div>
  524. <span class="tag success">已完成</span>
  525. </div>
  526. </div>
  527. <div class="shared">
  528. <div class="section-title">备注与检测材料(整弹窗一份,同步到本次可写任务)</div>
  529. <div class="field" style="margin-bottom:12px">
  530. <label>备注</label>
  531. <textarea rows="2" placeholder="选填"></textarea>
  532. </div>
  533. <div class="field">
  534. <label>检测材料</label>
  535. <div class="fake-upload">上传区示意 · 任一项「已完成」时必填</div>
  536. </div>
  537. </div>
  538. </section>
  539. <div class="overlay" id="overlay" aria-hidden="true">
  540. <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title">
  541. <div class="dialog__head">
  542. <h3 class="dialog__title" id="dlg-title">填写检测结果 · 第三方质检项目</h3>
  543. <button class="close-x" type="button" id="close-dialog" aria-label="关闭">×</button>
  544. </div>
  545. <div class="dialog__body">
  546. <div class="item-block">
  547. <div class="item-block__head">
  548. <div class="item-block__name">1. HIV-1 RNA 定量 <span class="item-block__company">· 金域医学</span></div>
  549. <span class="tag warning">待执行</span>
  550. </div>
  551. <div class="section-title">检测结论</div>
  552. <div class="grid-2">
  553. <div class="field"><label>任务状态 *</label><div class="radios"><label><input type="radio" name="s1" checked /> 待执行</label><label><input type="radio" name="s1" /> 已完成</label></div></div>
  554. <div class="field"><label>结论</label><div class="radios"><label><input type="radio" name="c1" checked /> 待结论</label><label><input type="radio" name="c1" /> 通过</label><label><input type="radio" name="c1" /> 不通过</label></div></div>
  555. </div>
  556. </div>
  557. <div class="item-block">
  558. <div class="item-block__head">
  559. <div class="item-block__name">2. 乙肝五项 <span class="item-block__company">· 金域医学</span></div>
  560. <span class="tag success">已完成</span>
  561. </div>
  562. <div class="section-title">检测结论</div>
  563. <div class="grid-2">
  564. <div class="field"><label>任务状态 *</label><div class="radios"><label><input type="radio" name="s2" /> 待执行</label><label><input type="radio" name="s2" checked /> 已完成</label></div></div>
  565. <div class="field"><label>结论 *</label><div class="radios"><label><input type="radio" name="c2" /> 待结论</label><label><input type="radio" name="c2" checked /> 通过</label><label><input type="radio" name="c2" /> 不通过</label></div></div>
  566. </div>
  567. </div>
  568. <div class="item-block">
  569. <div class="item-block__head">
  570. <div class="item-block__name">3. 支原体检测 <span class="item-block__company">· 迪安诊断</span></div>
  571. <span class="tag info">待执行</span>
  572. </div>
  573. <div class="section-title">检测结论</div>
  574. <div class="grid-2">
  575. <div class="field"><label>任务状态 *</label><div class="radios"><label><input type="radio" name="s3" checked /> 待执行</label><label><input type="radio" name="s3" /> 已完成</label></div></div>
  576. <div class="field"><label>结论</label><div class="radios"><label><input type="radio" name="c3" checked /> 待结论</label><label><input type="radio" name="c3" /> 通过</label><label><input type="radio" name="c3" /> 不通过</label></div></div>
  577. </div>
  578. </div>
  579. <div class="item-block">
  580. <div class="item-block__head">
  581. <div class="item-block__name">4. 染色体核型分析 <span class="item-block__company">· 华大基因</span></div>
  582. <span class="tag success">已完成</span>
  583. </div>
  584. <div class="section-title">检测结论</div>
  585. <div class="grid-2">
  586. <div class="field"><label>任务状态 *</label><div class="radios"><label><input type="radio" name="s4" /> 待执行</label><label><input type="radio" name="s4" checked /> 已完成</label></div></div>
  587. <div class="field"><label>结论 *</label><div class="radios"><label><input type="radio" name="c4" /> 待结论</label><label><input type="radio" name="c4" checked /> 通过</label><label><input type="radio" name="c4" /> 不通过</label></div></div>
  588. </div>
  589. </div>
  590. <div class="item-block">
  591. <div class="item-block__head">
  592. <div class="item-block__name">5. STR 比对 <span class="item-block__company">· 华大基因</span></div>
  593. <span class="tag success">已完成</span>
  594. </div>
  595. <div class="section-title">检测结论</div>
  596. <div class="grid-2">
  597. <div class="field"><label>任务状态 *</label><div class="radios"><label><input type="radio" name="s5" /> 待执行</label><label><input type="radio" name="s5" checked /> 已完成</label></div></div>
  598. <div class="field"><label>结论 *</label><div class="radios"><label><input type="radio" name="c5" /> 待结论</label><label><input type="radio" name="c5" checked /> 通过</label><label><input type="radio" name="c5" /> 不通过</label></div></div>
  599. </div>
  600. </div>
  601. <div class="shared">
  602. <div class="section-title">备注与检测材料</div>
  603. <div class="field" style="margin-bottom:12px">
  604. <label>备注</label>
  605. <textarea rows="3" placeholder="选填(同步到本次弹窗可写任务)"></textarea>
  606. </div>
  607. <div class="field">
  608. <label>检测材料</label>
  609. <div class="fake-upload">点击上传检测材料(示意)</div>
  610. </div>
  611. </div>
  612. </div>
  613. <div class="dialog__foot">
  614. <button class="btn" type="button" id="close-dialog-2">取消</button>
  615. <button class="btn btn-main" type="button" data-option="demo-save-ok">保存</button>
  616. </div>
  617. </div>
  618. </div>
  619. <script>
  620. (function () {
  621. var overlay = document.getElementById('overlay')
  622. function openDlg() {
  623. overlay.classList.add('is-open')
  624. overlay.setAttribute('aria-hidden', 'false')
  625. }
  626. function closeDlg() {
  627. overlay.classList.remove('is-open')
  628. overlay.setAttribute('aria-hidden', 'true')
  629. }
  630. document.getElementById('open-dialog-card').addEventListener('click', openDlg)
  631. document.getElementById('open-dialog-card').addEventListener('keydown', function (e) {
  632. if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDlg() }
  633. })
  634. document.getElementById('open-dialog-btn').addEventListener('click', function (e) {
  635. e.stopPropagation(); openDlg()
  636. })
  637. document.getElementById('open-dialog-btn-2').addEventListener('click', openDlg)
  638. document.getElementById('close-dialog').addEventListener('click', closeDlg)
  639. document.getElementById('close-dialog-2').addEventListener('click', closeDlg)
  640. overlay.addEventListener('click', function (e) {
  641. if (e.target === overlay) closeDlg()
  642. })
  643. document.addEventListener('keydown', function (e) {
  644. if (e.key === 'Escape') closeDlg()
  645. })
  646. })()
  647. </script>
  648. </body>
  649. </html>