redo of dialog

scss/_dialog.scss

@@ -1,60 +1,40 @@
 .dialog {
-  opacity: 0;
-  height: 100%;
-  width: 100%;
   position: fixed;
-  top: 0;
+  z-index: 1;
   left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.9);
 
-  background-color: rgba(0, 0, 0, 0.5);
-
-  .dialogContent {
-    position:relative;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    max-height: max-content;
-    max-width: max-content;
-    background-color: white;
-    border: 10px solid rgb(86, 86, 86);
-    border-radius: 10px;
-    display: flex;
-    width: 80%;
-    height: 80%;
-
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
   }
 
-  .imageDialog{
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
+  .close:hover,
+  .close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
   }
 }
 
-a.dialogClose{
-  float:right;
-  margin-top:-30px;
-  margin-right:-30px;
-  cursor:pointer;
-  color: #fff;
-  border: 1px solid #AEAEAE;
-  border-radius: 30px;
-  background: #605F61;
-  font-size: 31px;
-  font-weight: bold;
-  display: inline-block;
-  line-height: 0;
-  padding: 11px 3px;
-  text-decoration: none;
-}
-
-.dialogClose:before {
-  content: "×";
-
-}
+.dialogContent {
+  padding-top: 20px;
+  margin: auto;
+  max-width: 80%;
+  max-height: 80%;
+  text-align: center;
+  img {
+    max-height: auto;
+    max-width: 100%;
+  }
+}

ts/dialog.ts

@@ -1,7 +1,3 @@
-function createDialogIframe(url:string) {
-    createDialogHTML(`<iframe src="${url}">`);
-}
-
 function createDialogImage(url:string) {
     createDialogHTML(`<img src="${url}">`, "imageDialog");
 }
@@ -9,18 +5,19 @@ function createDialogImage(url:string) {
 function createDialogHTML(html:string, customClasses = "") {
     let dialog = document.createElement("div");
     dialog.classList.add("dialog");
-    dialog.onclick = function () {
-        fade(dialog, -0.04, true);
-    }
 
     dialog.innerHTML = `
+    <span class="close">&times;</span>
     <div class="dialogContent ${customClasses}">
-    <!-- <a class="dialogClose"></a> -->
         ${html}
     </div>`;
 
     document.body.appendChild(dialog);
     fade(dialog, 0.04);
+
+    (<HTMLElement> dialog.querySelector(".close")).onclick = function (){
+        fade(dialog, -0.04, true);
+    }
 }
 
 function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {

website.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>