diff --git a/scss/_dialog.scss b/scss/_dialog.scss index 1e49c54f800401d3447abdfcc881abf9a6d167d8..3165f3ec26bc869ccae18a769407a1aaab82f850 100644 --- a/scss/_dialog.scss +++ b/scss/_dialog.scss @@ -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: "×"; + +} diff --git a/ts/dialog.ts b/ts/dialog.ts index d101421b22147758fed3ecf8339a17b735e4efa2..8e1dcc470a501cf1befa5c796a2781af56a8201d 100644 --- a/ts/dialog.ts +++ b/ts/dialog.ts @@ -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);