Simple Modal in pure Javascript
Published: 2020-11-05 14:24:11

When you can't use the library you want, you have to deal with what you have...and in fact it's sometimes challenging :-)

Here is then the vanilla version of my previous Mithril version.

You can test it here : [VanillaModal](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ADAOgBwBYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHigQAbgAJoAXgA64PlFqxlAPjEB6SVM2LqRidMPUZMsSwCMmgLKr1ciwAcArgCd4MgFIBlXVtzSyNLU1kFZTZPCABzOPhPRzUNEBDLKwAjdzY2ARkwJ1glEAQ49WUZTVCLTMsAGXgKjTrwnRy8gQzwzvyLItTS6j53KXhaXPgqmpkw+pkAOXgAd1J59r7ujezc-stB9VLaV08+Vz51kGqdywBBLNG2Hd0t6gzdfXNPsyMjbhApHgCB4bAgAnITBsWCQaAAtGhYSAAL54Gj0RjMABW5F4AiEIiY-GopDYMgAwvjhGT5DJgMiANx-aiUwTUijKcqVEAAXRktIABi8WAAmTQASWohD4MgAEnwGEExUYhcYWVTBByQCMxhMpso+YLhWLlmsleZVUZWQS2FqTmcLldDTJVfVrGKHk9zSrmSsINQoHwVhh-GxaEJ+XT5sSbUgZNR3LBYHh5hBSAB5VzCOOEdRAlN1c7CAAiEHUfDiOfc1FB4OoAAoANbwACeAEpgDtQ+H4BgY9TI9b2c2Wzyu2GhBg05nhJGYu54Ey2jIpBBVvW2-NUdHYJd4KXy5WZIRq7WBBvO8vu5Pp1mLLTc7AgUv6qv15u6sijF+1Sea2CCjfFYZA3KM6ikWhPEKYpySfSMZGvXtb1nHYAH45hUVJoNSOFSBYINjGuOZlzjZRDlgbD1DhFhoCgYRlHmcip2oagkllAAVewGng11MgiGQeFgWhSFIUoABJgHI2DSC-dJbisfQBKEkTSnIuF+0ELR5PCRTSRbBBSiEAAPNg4XUeJqCQWI4nYKoBEEiAeEbUpEL7XcgQPXc4g3LTlwWKxSFcWgLEE4TRLI4p1Pc6Z0lgvddEC4KegWH4DG0qxXE0CTXI0thkV0TL5NS5LivmVUfyMGJ4kSZJigwWgYAAUXGQQGjTAkknrZQHKc5Q8GPU8AIset4DbMDLAgqDyMsWlezDTxEjYDBFruPJYk6eAusw7kPwOYoZAAMgOhCJ17ItqE8it63Ij9kQ-ZkHuoAEgRBIbIRAEUAHYkVRdEGFEPsRIBXLRAAYnIy8KuoDA1LwgjxpkSRAqEls4yyXcnKXKGYcimiYFnS9LCR1wUbjEZWKx5kcawwnMkdCAhpzCAjPgKAGWI+oAC84X9OijLjGx2Z2IKYH9OI4XyVwBbQNBXCMl9MgQQg2DjNAFcsSXVfVmQ-SgNgWGltAAFIheXFh4HidhDZNjnMj4cZPEIXcVjjSZ8lN+osloJy4jOasoHUvhd08OMFqyesRUjvA0Gjttta9n2-YDQPg9DuIvYj6Os8wABWOPiKhywdAAKhkFJnCHQQZGLnQjGpqjcoRywE8bX3RmT-hU5kUHCHgXve+1sBILif1XdyPhtZFyRqCPEVZflnZHk8OiQ5kGw5ZkUgg+gbusD37Xdf1uMsGNwfaCMuFD4NmQAE50DlyfLgZusrOBcNpEXHZgogIfGe-hhJYyEwDgdY1AoYAAERyEE8BiUgMh-7wElrTaBCpgCazhAAZhlg-c43sGaozQMiW2+Q0HnFhAyXBPB8FIBsFub8VM1KCT3AjaMXgt6rwuP6IQngFbWStmrehap66wCinuJA+EHYI0eBfPCDUgyqyATIHOG8w60HrDHDR0cMA4Djt+Z6wJ4BnhJKIDBMIc4oh5MiIAA)

```html
<div id="modal"></div>

<div>
  <h1>Modal in pure JS</h1>
  
  <div id="triggerModal">
    <button modal="legal" >  
      Legal
    </button>
    <button modal="nouveaute" >  
      News
    </button>
    <button  modal="apropos" >
      About
    </button>
  </div>
</div>
```

```css
.modal-shown {
  display: block;
}

.modal-hidden {
  display: none;
}

.modal {
    position: fixed; 
    z-index: 1; 
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(222,0,0);
    background-color: rgba(220,0,0,0.5); 
}

  /* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 960px;
}

.modal-close {
  
  cursor: pointer;
  right:0;
}

.modal-close:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
```

```js
const Content = {};

Content["legal"] = `
    <h2>Info Home</h2>
`

Content["nouveaute"] = `
    <h2>News</h2>
`

Content["apropos"] = `
    <h2>About</h2>
`

window.State = {
  content: null,
  isOpen: false,
  openDialog: function(key){
    State.content = Content[key]
    State.isOpen = true;
    view()
  },
  closeDialog: function(){
    State.isOpen = false;
    view()
  }
}

function view () {
  var modalCls =  State.isOpen 
    ? "modal modal-shown"  
    : "modal modal-hidden"
  modal.innerHTML =  `
    <div class="${modalCls}">
      <div class="modal-content">
        <div style="text-align:right" onclick="State.closeDialog()">
          <span class="modal-close">Close</span>
        </div>
        <p>${State.content}</p>
      </div>
    </div>
  `
}

triggerModal.addEventListener("click", function (e) {
  var modal  = e.target.getAttribute("modal")
  modal && State.openDialog(modal)
})
```