add close button to image zoom dialog
This commit is contained in:
parent
938e1bc1a3
commit
b5dd4ba1d6
2 changed files with 27 additions and 2 deletions
|
@ -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: "×";
|
||||
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue