add close button to image zoom dialog

This commit is contained in:
jonasled 2021-03-09 22:35:57 +01:00
parent 938e1bc1a3
commit b5dd4ba1d6
2 changed files with 27 additions and 2 deletions

View file

@ -31,3 +31,25 @@
width: auto;
}
}
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: "×";
}

View file

@ -7,14 +7,17 @@ function createDialogImage(url:string) {
}
function createDialogHTML(html:string, customClasses = "") {
var dialog = document.createElement("div");
let dialog = document.createElement("div");
dialog.classList.add("dialog");
dialog.onclick = function () {
fade(dialog, -0.04, true);
}
dialog.innerHTML = `
<div class="dialogContent ${customClasses}">${html}</div>`;
<div class="dialogContent ${customClasses}">
<a class="dialogClose"></a>
${html}
</div>`;
document.body.appendChild(dialog);
fade(dialog, 0.04);