https://hmu.edu.vn/JS/jquery.blockUI5.js?v=202607180V794884

1/**
2 * waitingDialog - Thay thế jquery.blockUI5.js
3 * Dùng CSS thuần, KHÔNG dùng Bootstrap Modal JS
4 * → Không bao giờ bị lỗi aria-hidden / focus
5 */
6var waitingDialog = (function () {
7    'use strict';
8
9    var overlay = null;
10
11    var CSS = [
12        '#wd-overlay{',
13        '  position:fixed;inset:0;z-index:9999;',
14        '  display:flex;align-items:center;justify-content:center;',
15        '  background:rgba(0,0,0,.45);',
16        '  opacity:0;transition:opacity .15s linear;',
17        '  pointer-events:none;',
18        '}',
19        '#wd-overlay.wd-show{opacity:1;pointer-events:all;}',
20        '#wd-box{',
21        '  background:#fff;border-radius:.375rem;',
22        '  box-shadow:0 .5rem 1rem rgba(0,0,0,.3);',
23        '  min-width:220px;max-width:90vw;overflow:hidden;',
24        '}',
25        '#wd-header{padding:.5rem .75rem;border-bottom:1px solid #dee2e6;}',
26        '#wd-title{margin:0;font-size:1rem;font-weight:500;}',
27        '#wd-body{padding:.75rem;}',
28        '#wd-bar{',
29        '  height:1rem;border-radius:.25rem;overflow:hidden;',
30        '  background:#e9ecef;',
31        '}',
32        '#wd-bar-inner{',
33        '  height:100%;width:100%;',
34        '  background:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);',
35        '  background-color:#0d6efd;',
36        '  background-size:1rem 1rem;',
37        '  animation:wd-stripe .75s linear infinite,wd-pulse 1.5s ease-in-out infinite;',
38        '}',
39        '@keyframes wd-stripe{0%{background-position:1rem 0}100%{background-position:0 0}}',
40        '@keyframes wd-pulse{0%,100%{opacity:1}50%{opacity:.6}}'
41    ].join('');
42
43    function inject() {
44        // Chèn CSS một lần duy nhất
45        if (!document.getElementById('wd-style')) {
46            var s = document.createElement('style');
47            s.id = 'wd-style';
48            s.textContent = CSS;
49            document.head.appendChild(s);
50        }
51
52        // Tạo overlay nếu chưa có hoặc đã bị remove khỏi DOM
53        if (!overlay || !document.body.contains(overlay)) {
54            overlay = document.createElement('div');
55            overlay.id = 'wd-overlay';
56            // Accessibility đúng chuẩn: role=status, không dùng aria-hidden
57            overlay.setAttribute('role', 'status');
58            overlay.setAttribute('aria-live', 'polite');
59            overlay.setAttribute('aria-atomic', 'true');
60            overlay.innerHTML =
61                '<div id="wd-box">' +
62                '  <div id="wd-header"><h5 id="wd-title">Đang xử lý...</h5></div>' +
63                '  <div id="wd-body"><div id="wd-bar"><div id="wd-bar-inner"></div></div></div>' +
64                '</div>';
65            document.body.appendChild(overlay);
66        }
67    }
68
69    return {
70        show: function (message) {
71            inject();
72            if (message) {
73                overlay.querySelector('#wd-title').textContent = message;
74            }
75            // rAF đảm bảo transition CSS chạy sau khi element đã vào DOM
76            requestAnimationFrame(function () {
77                overlay.classList.add('wd-show');
78            });
79        },
80
81        hide: function () {
82            if (!overlay) return;
83            overlay.classList.remove('wd-show');
84            // Xóa khỏi DOM sau khi transition fade-out xong (150ms + buffer)
85            setTimeout(function () {
86                if (overlay && overlay.parentNode) {
87                    overlay.parentNode.removeChild(overlay);
88                }
89            }, 160);
90        },
91
92        forceHide: function () {
93            if (overlay && overlay.parentNode) {
94                overlay.parentNode.removeChild(overlay);
95            }
96            overlay = null;
97        }
98    };
99})();