CSSとJSを使用したモーダルボックスの作成方法
15405 ワード
CSSとJavaScriptでモーダルボックスを作成する方法.目的は、サードパーティ製のライブラリを使用していないクロスブラウザ互換性がある透明でシンプルなモーダルポップアップボックスを完了することです.バニラJavaScriptを使わなければなりません.
CSSとJSを使用したモーダルボックスの作成
モーダルポップアップは広くweb上で使用されます.彼らの人気の用途のいくつかは、通知/警報を示して、登録フォームを取り扱うことをニュースレターサインアップをドライブすることを含みます.
このモデルは、あなたが任意の目的と任意の場所にそれを使用するために自由になることを意味広いです.
HTMLマークアップ
Demo
モーダルボックスはグローバルに好意的です、そして、現在、あなたは軽くて、jQueryのようなサードパーティ製のライブラリを使用しない使いやすいプロセスを持ちます.あなたはニュースレター、サインアップ、または何をしたいのため、このモデルボックスを使用することができます!あなたが結果を楽しんで、それが役に立つことを望みます.質問があるならば、下記を議論してください.ありがとう.
CSSとJSを使用したモーダルボックスの作成
モーダルポップアップは広くweb上で使用されます.彼らの人気の用途のいくつかは、通知/警報を示して、登録フォームを取り扱うことをニュースレターサインアップをドライブすることを含みます.
このモデルは、あなたが任意の目的と任意の場所にそれを使用するために自由になることを意味広いです.
HTMLマークアップ
<div class="container">
<div class="popup-box">
<a class="close-button popup-close" title="close">×</a>
<h2>This is My PopUp</h2>
<h3>How to create a model box with HTML CSS and JavaScript.</h3>
</div>
</div>
<a class="button popup-button">Open Model!</a>
CSSコード
<style>
body {
font-family: "Open Sans";
line-height: 200%;
}
.container { position: fixed; left: 0; top: 0;
width: 100%; height: 100%; background: rgba(0, 0, 0, 1.5);
opacity: 0; visibility: hidden; transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
h2, h3{
text-align:center; font-size: 5.5em; padding:20px;}
h3{
text-align:center; font-size: 4em; line-height:1.5em; color:#888;}
.button {
padding: 2.2% 5.5%; display: inline-block; -webkit-transition: all linear 0.15s;
transition: all linear 0.15s; border-radius: 3px; background: #7b78ff;
font-size: 22px; font-weight: bold; text-decoration: none;
text-transform: uppercase; color: #fff;}
.button:hover { opacity: 1.75; cursor:pointer; color:#000;}
.popup-box { width: 80%; height:500px; padding: 70px;
transform: translate(-50%, -50%) scale(0.5);
position: absolute; top: 50%; left: 50%;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8);
border-radius: 5px; background: #fff;
text-align: center;}
.close-button { width: 35px; height: 35px; display: inline-block;
position: absolute; top: 10px; font-size:60px; right: 10px;
-webkit-transition: all ease 0.5s; transition: all ease 0.5s;
border-radius: 50%; background: #7b78ff; font-weight: bold;
color: #fff; text-align:center; cursor:pointer;
}
.close-button:hover { -webkit-transform: rotate(180deg);
transform: rotate(400deg);
}
.show-container { opacity: 1; visibility: visible; transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 1.25s 0s, transform 1.25s;
}
</style>
ジャバスクリプト<script>
const container = document.querySelector(".container");
const button = document.querySelector(".button");
const closeButton = document.querySelector(".close-button");
function togglecontainer() {
container.classList.toggle("show-container");
}
function windowOnClick(event) {
if (event.target === container) {
togglecontainer();
}}
button.addEventListener("click", togglecontainer);
closeButton.addEventListener("click", togglecontainer);
window.addEventListener("click", windowOnClick);
</script>
あなたは、Create Modal Box Using CSS and JSから詳細にこの記事を読むことができますDemo
モーダルボックスはグローバルに好意的です、そして、現在、あなたは軽くて、jQueryのようなサードパーティ製のライブラリを使用しない使いやすいプロセスを持ちます.あなたはニュースレター、サインアップ、または何をしたいのため、このモデルボックスを使用することができます!あなたが結果を楽しんで、それが役に立つことを望みます.質問があるならば、下記を議論してください.ありがとう.
Reference
この問題について(CSSとJSを使用したモーダルボックスの作成方法), 我々は、より多くの情報をここで見つけました https://dev.to/elinabey/how-to-create-modal-box-using-css-and-js-3bjjテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol