JAVASCRIPT   72

modal.js

Guest on 30th July 2021 02:53:08 PM

  1. const Modal = {
  2.   show (params) {
  3.     // Build modal
  4.     let modalStyle = 'font-family:sans-serif; ' +
  5.         'display:table; ' +
  6.         'text-align:center; ' +
  7.         'font-weight:300; ' +
  8.         'font-size:30px; ' +
  9.         'left:0; top:0;' +
  10.         'position:fixed; ' +
  11.         'z-index: 9990;' +
  12.         'color: #0460B5; ' +
  13.         'width: 100%; ' +
  14.         'height: 100%; ' +
  15.         'background-color:rgba(255,255,255,.9);' +
  16.         'transition: opacity .3s ease;'
  17.  
  18.     // Create wrapper
  19.     let printModal = document.createElement('div')
  20.     printModal.setAttribute('style', modalStyle)
  21.     printModal.setAttribute('id', 'printJS-Modal')
  22.  
  23.     // Create content div
  24.     let contentDiv = document.createElement('div')
  25.     contentDiv.setAttribute('style', 'display:table-cell; vertical-align:middle; padding-bottom:100px;')
  26.  
  27.     // Add close button (requires print.css)
  28.     let closeButton = document.createElement('div')
  29.     closeButton.setAttribute('class', 'printClose')
  30.     closeButton.setAttribute('id', 'printClose')
  31.     contentDiv.appendChild(closeButton)
  32.  
  33.     // Add spinner (requires print.css)
  34.     let spinner = document.createElement('span')
  35.     spinner.setAttribute('class', 'printSpinner')
  36.     contentDiv.appendChild(spinner)
  37.  
  38.     // Add message
  39.     let messageNode = document.createTextNode(params.modalMessage)
  40.     contentDiv.appendChild(messageNode)
  41.  
  42.     // Add contentDiv to printModal
  43.     printModal.appendChild(contentDiv)
  44.  
  45.     // Append print modal element to document body
  46.     document.getElementsByTagName('body')[0].appendChild(printModal)
  47.  
  48.     // Add event listener to close button
  49.     document.getElementById('printClose').addEventListener('click', function () {
  50.       Modal.close()
  51.     })
  52.   },
  53.   close () {
  54.     let printFrame = document.getElementById('printJS-Modal')
  55.  
  56.     printFrame.parentNode.removeChild(printFrame)
  57.   }
  58. }
  59.  
  60. export default Modal

Raw Paste


Login or Register to edit or fork this paste. It's free.