Html, CSS 및 Vanilla JavaScript를 사용하여 모드 팝업 상자를 만드는 4가지 방법
54410 단어 htmlwebdevcssjavascript
Knowing is not enough; We must apply. Willing is not enough; We must do.
― Bruce Lee
카탈로그
소개
웹 디자인을 만들 때 고려해야 할 가장 중요한 일 중 하나는 사용자의 상호작용이다.사용자 상호작용의 좋은 예는 패턴 상자이다.
모드 상자는 주로 사용자가 실행하는 작업에 따라 브라우저에 메시지 상자로 표시됩니다.모드 상자는 경보 상자, 섬광 알림 상자, 대화상자와 등불 상자를 포함하여 서로 다른 형식과 모양을 가지고 있다.기다리다
모드 상자의 독특한 기능은 브라우저의 메인 창을 사용하지 않지만, 모드 창이 웹 페이지 앞에 하위 창으로 표시되도록 하는 것이다.
응용 프로그램에서 패턴을 사용하는 몇 가지 중요한 상황은 다음과 같다.
샘플 1
이 강좌의 절차에서, 우리는 세 개의 파일, 즉 색인을 만들 것이다.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>
색인 페이지의 주체에서, 우리는 id와 같은 중요한 HTML 속성을 가지고 있으며, 이따가 우리의javascript 파일에서 페이지를 조작하는 데 사용할 것입니다.
마지막으로, 우리의 단추 탭에, 우리는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 파일은 표시 속성의 초기 상태를 없음으로 설정합니다.원인은 응용 프로그램에서 설명될 것이다.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 이벤트 속성이 있습니다.
풍격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;
}
응용 프로그램.회사 명
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"));
}
견본
지수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>
페이지에는 에서 설명한 팝 () 함수가 두 개 더 있습니다. 프로그램에서 인용할 것입니다.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;
}
응용 프로그램.회사 명
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
}
}
모드가 처음에 비어 있고 눌렀다면, 디스플레이 설정은block, 모드 변수는true로 설정하여 모드를 표시합니다. 닫기 단추를 누르면, 디스플레이 설정은none, 모드 변수는null로 설정하여 모드를 삭제합니다.
이렇게 하면 우리는 다음과 같은 결과를 얻어야 한다.
견본
지수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);
}
응용 프로그램.회사 명
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);
결론
이것은 우리 네 개의 모드의 실현이다.너는 마음대로 그것을 설계할 수 있고, 네가 진행하고 있는 모든 프로젝트에서 그것을 실현할 수 있다.나는 디자인이 가장 좋은 것이 아닐 수도 있다는 것을 알고 있지만, 본고의 목표는 디자인이 아니라javascript 실현에 더욱 치중한다.
이 코드의 링크는 Github 에서 찾을 수 있습니다.
더 많은 강좌를 구독하세요here.
Reference
이 문제에 관하여(Html, CSS 및 Vanilla JavaScript를 사용하여 모드 팝업 상자를 만드는 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.)
좋은 웹페이지 즐겨찾기
