https://davidrwill.com/js/lib/modal.js?v2

1function makeModal(modalId, headerText, contentHtml) {
2    var existingModal = document.getElementById(modalId);
3
4    if (!existingModal) {
5        // Create the modal
6        var modal = document.createElement('div');
7        modal.id = modalId;
8        modal.style.display = 'none';
9        modal.style.position = 'fixed';
10        modal.style.zIndex = '999999';
11        modal.style.paddingTop = '100px';
12        modal.style.left = '0';
13        modal.style.top = '0';
14        modal.style.width = '100%';
15        modal.style.height = '100%';
16        modal.style.overflow = 'auto';
17        modal.style.backgroundColor = 'rgb(0, 0, 0)';
18        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
19        
20
21        // Modal content
22        var modalContent = document.createElement('div');
23        modalContent.style.position = 'relative';
24        modalContent.style.backgroundColor = '#fefefe';
25        modalContent.style.margin = 'auto';
26        modalContent.style.padding = '0';
27        modalContent.style.border = '1px solid #888';
28        modalContent.style.maxWidth = '638px';
29        modalContent.style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
30        modalContent.style.animationName = 'animatetop';
31        modalContent.style.animationDuration = '0.4s';
32        modalContent.style.borderRadius = '10px';
33
34        // Modal header
35        var modalHeader = document.createElement('div');
36        modalHeader.style.display = 'flex';
37        modalHeader.style.justifyContent = 'space-between';
38        modalHeader.style.alignItems = 'center';
39        modalHeader.style.padding = '10px';
40
41        // Header text
42        var headerTextElement = document.createElement('span');
43        headerTextElement.innerHTML = headerText;
44        headerTextElement.style.flexGrow = '1';
45
46        // Close button
47        var closeButton = document.createElement('span');
48        closeButton.innerHTML = '×';
49        closeButton.style.color = '#000';
50        closeButton.style.fontSize = '28px';
51        closeButton.style.fontWeight = 'bold';
52        closeButton.style.cursor = 'pointer';
53        closeButton.onclick = function () {
54            modal.style.display = 'none';
55        };
56
57        // Modal footer
58        var modalFooter = document.createElement('div');
59        modalFooter.style.padding = '10px';
60
61        // Append elements to header
62        modalHeader.appendChild(headerTextElement);
63        modalHeader.appendChild(closeButton);
64
65        // Modal body
66        var modalBody = document.createElement('div');
67        modalBody.style.padding = '2px 16px';
68
69        // Set content HTML
70        modalBody.innerHTML = contentHtml;
71
72        // Append elements to content
73        modalContent.appendChild(modalHeader);
74        modalContent.appendChild(modalBody);
75        modalContent.appendChild(modalFooter);
76        modal.appendChild(modalContent);
77        
78        document.body.appendChild(modal);
79
80        existingModal = modal;
81    }
82
83    existingModal.style.display = 'block';
84
85    // When the user clicks anywhere outside of the modal, close it
86    window.onclick = function (event) {
87        if (event.target === existingModal) {
88            existingModal.style.display = 'none';
89        }
90    };
91}