モーダルポップアップボックスを作成する4つの方法
54100 ワード
Knowing is not enough; We must apply. Willing is not enough; We must do.
― Bruce Lee
目次
導入
Webページのデザインを作成するときに考慮する最も重要なものの一つは、ユーザーの対話性です.ユーザー対話の良い例はモーダルボックスです.
モーダルボックスは、主にユーザーによって実行される動作に基づいてブラウザのメッセージボックスとして表示されます.モーダルボックスには、アラートボックス、フラッシュ通知ボックス、ダイアログボックス、ライトボックスを含むさまざまなフォームや図形が付属しています.など
モーダルボックスのユニークな特徴は、ブラウザのメインウィンドウを無効にするという事実ですが、モーダルウィンドウをWebページの前にある子ウィンドウとして表示することができます.
アプリケーションでモーダルを使用するための重要なケースのいくつかは、以下を含みます
サンプル1
チュートリアルの流れは、3つのファイルを作成します.HTMLスタイル.CSSとアプリ.つのサンプルの上のJSファイル.次に、これらのファイルのそれぞれのコードの詳細なブレークダウンを行います.
インデックス.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://kit.fontawesome.com/a71707a89a.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./style.css"/>
<title>Popup Box</title>
</head>
<body>
<div id="popUpOverlay"></div>
<div id="popUpBox">
<div id="box">
<i class="fas fa-check-circle fa-5x"></i>
<h1>Here Goes Your Popup</h1>
<div id="closeModal"></div>
</div>
</div>
<button
onclick="Alert.render('You look very pretty today.')"
class="btn">
Show Alert
</button>
<script src="./app.js"></script>
</body>
</html>
インデックスページの本体では、ページの操作のためにJavaScriptファイルで後で使用されるIDのCHERのような重要なHTML属性があります.
最後に、我々のボタンタグでは、OnClickイベント属性を持っています.この機能は、機能的なメッセージをページに表示する機能を提供します.
スタイル。CSS
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: pink;
font-size: 20px;
color: white;
padding: 10px 30px;
cursor: pointer;
}
#popUpBox{
width: 500px;
overflow: hidden;
background: pink;
box-shadow: 0 0 10px black;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
padding: 10px;
text-align: center;
display: none;
}
それから、我々は我々のボタンにスタイルをつけました.BTNクラス.これにより、ページの中央にモーダルを表示するボタンを配置できます.
最後に、太鼓台を使用して、我々は、ページの中心にモーダルを置くことができます.
Z - indexプロパティを使用すると、ページ内の他の要素の前にモーダルをスタックできます.
最も重要なことは、スタイルのメモを取る.CSSファイルは、表示プロパティの初期状態をNoneとして設定した事実です.この理由は、このアプリで説明されます.jsファイル.
アプリ。js
var Alert = new CustomAlert();
function CustomAlert(){
this.render = function(){
//Show Modal
let popUpBox = document.getElementById('popUpBox');
popUpBox.style.display = "block";
//Close Modal
document.getElementById('closeModal')
.innerHTML ='<button onclick="Alert.ok()">OK</button>';
}
this.ok = function(){
document.getElementById('popUpBox').style.display = "none";
document.getElementById('popUpOverlay').style.display = "none";
}
}
サンプル2
インデックスから始めます.HTMLスタイル.CSSとアプリ.jsファイルはそれぞれ.
インデックス.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0"
>
<script
src="https://kit.fontawesome.com/a71707a89a.js" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./style.css"/>
<title>Popup Box</title>
</head>
<body>
<input
type="button"
value="Test the alert"
onclick="alert('...but something went wrong');"
class="btn"
/>
<script src="./app.js"></script>
</body>
</html>
また、OnClickイベント属性を持っています.このメソッドは、モードで表示されるテキストを含むAlert ()メソッドを使用します.
スタイル。CSS
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(48, 48, 177);
font-size: 20px;
color: white;
padding: 10px 30px;
cursor: pointer;
}
#modalContainer {
background-color:rgba(0, 0, 0, 0.3);
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
}
#alertBox {
position:relative;
width:500px;
min-height:100px;
margin-top:250px;
border:1px solid #666;
background-color: pink;
background-repeat:no-repeat;
background-position:20px 30px;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:white;
color: black;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:7px;
border:0 none;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#95b9d8;
border-radius: 3px;
text-decoration:none;
}
アプリ。js
var titleAlert = "It Pops!!!";
var closeModal = "Ok";
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
//Function To Create Custom Alert
function createCustomAlert(txt) {
doc = document;
if(doc.getElementById("modalContainer")) return;
//Create Div For Modal Container Body
modalObject = doc.getElementsByTagName("body")[0\].
appendChild(doc.createElement("div"));
modalObject.id = "modalContainer";
modalObject.style.height =
doc.documentElement.scrollHeight + "px";
//Create Div For Alert Box Container Body
alertObj = modalObject.appendChild(doc.createElement("div"));
alertObj.id = "alertBox";
if(doc.all && !window.opera) alertObj.style.top =
document.documentElement.scrollTop + "px";
alertObj.style.left =
(doc.documentElement.scrollWidth - alertObj.offsetWidth)/2
+ "px";
alertObj.style.visiblity="visible";
//Create Element For Title Alert
h1 = alertObj.appendChild(doc.createElement("h1"));
h1.appendChild(doc.createTextNode(titleAlert));
//Create Tag For Alert Body Content
msg = alertObj.appendChild(doc.createElement("p"));
msg.appendChild(doc.createTextNode(txt));
msg.innerHTML = txt;
//Create Tag To Close Modal Button
btn = alertObj.appendChild(doc.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(doc.createTextNode(closeModal));
btn.href = "#";
btn.focus();
btn.onclick = function() { removeCustomAlert();return false; }
alertObj.style.display = "block";
}
//Function To Remove Custom Alert
function removeCustomAlert() {
document.getElementsByTagName("body")[0].
removeChild(document.getElementById("modalContainer"));
}
サンプル3
インデックス.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://kit.fontawesome.com/a71707a89a.js" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css"/>
<title>Pop Up</title>
</head>
<body>
<a class="btn" onclick="pop()">Show Box</a>
<div id="box">
<i class="fas fa-check-circle"></i>
<h1>Good Job</h1>
<a class="close" onclick="pop()">Close Box</a>
</div>
<script src="app.js"></script>
</body>
</html>
また、2つのpop ()関数は、ページで宣言されます.JSファイル.
スタイル。CSS
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: pink;
font-size: 20px;
color: white;
padding: 10px 30px;
cursor: pointer;
}
#box{
width: 500px;
overflow: hidden;
background: pink;
box-shadow: 0 0 10px black;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
padding: 10px;
text-align: center;
display: none;
}
#box span{
color: hotpink;
font-size: 40px;
display: block;
margin: 20px 0;
}
#box h1{
color: brown
}
.close{
font-size: 18px;
color: white;
padding: 10px 20px;
cursor: pointer;
background: rgb(111, 111, 223);
display: inline-block;
border-radius: 1px solid #000;
}
アプリ。js
var modal = null
function pop() {
if(modal === null) {
document.getElementById("box").style.display = "block";
modal = true
} else {
document.getElementById("box").style.display = "none";
modal = null
}
}
モードが最初にNULLで、クリックされると、表示をブロックに設定し、モーダル変数をtrueに設定してモードを表示し、「閉じる」ボタンをクリックした場合は、表示をNoneに設定し、モーダル変数をnullに設定してモーダルを削除します.
これにより、以下の結果が得られます.
サンプル4
インデックス.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Pop Up</title>
</head>
<body>
<button class="show btn">Click To See Modal </button>
<div class="modal">
<div class="modal-box">
<span class="close-button">X</span>
<h1>Hello, my name is modal</h1>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
スタイル。CSS
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: pink;
font-size: 20px;
color: white;
padding: 10px 30px;
cursor: pointer;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
}
.modal-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
}
アプリ。js
let modal = document.querySelector(".modal");
let show = document.querySelector(".show");
let closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
show.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
結論
したがって、私たちの4つのモデルの実装があります.あなたがそれをすることができますが、あなたが作業しているすべてのプロジェクトでそれを実装し、それを実装することができます.私はデザインが最高でないかもしれないということを知っています、しかし、記事のゴールはデザインよりむしろJavascript実現に集中しました.
コードへのリンクはここで見つけることができますGithub .
もっとチュートリアルを購読するhere .
Reference
この問題について(モーダルポップアップボックスを作成する4つの方法), 我々は、より多くの情報をここで見つけました https://dev.to/desoga/4-ways-to-create-a-modal-popup-box-with-html-css-and-vanilla-javascript-nl9テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol