を用いたモーダル
11301 ワード
ここでは、純粋なJavaScriptでモーダルを実装する記事を投稿しました.
しかし、私は関数が世界的な名前空間を汚染するのを好みません.
µhtmlであなたのコードをiifeでラップできます.
ここでテストできます.
しかし、私は関数が世界的な名前空間を汚染するのを好みません.
µhtmlであなたのコードをiifeでラップできます.
ここでテストできます.
<div id="modal"></div>
<div>
<h1>Modal with UHTML</h1>
<div id="triggerModal">
<button modal="legal" >
Legal
</button>
<button modal="news" >
News
</button>
<button modal="about" >
About
</button>
</div>
</div>
#modal{
}
.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(2,0,0,0.5);
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 960px;
position:relative;
animation:animetop 0.4s
}
@keyframes animetop{
from{top:-300px;opacity:0}
to{top:0;opacity:1
}
}
.modal-close {
cursor: pointer;
right:0;
}
.modal-close:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
import {render, html} from 'uhtml';
(function () {
let Contents = {
"legal" : html`<h1>Legal</h1>`,
"news" : html`<h1>News</h1>`,
"about" : html`<h1>About</h1>`
}
let State = {
content: "",
isOpen: false,
openDialog () {
State.content = this.content
State.isOpen = true;
view()
},
closeDialog () {
State.isOpen = false;
view();
}
}
function view () {
var modalCls = State.isOpen
? "modal modal-shown"
: "modal modal-hidden"
render(modal, html`
<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) {
let modalName = e.target.getAttribute("modal")
State.content = Contents[modalName]
modalName && State.openDialog(modal)
})
})()
Reference
この問題について(を用いたモーダル), 我々は、より多くの情報をここで見つけました https://dev.to/artydev/a-modal-using-uhtml-4jk0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol