최근에 fullstack Ruby 앱을 만드는 것에서 Javascript 작업까지 점프했습니다. 당신이 이미 알고있는 바와 같이,자바 스크립트는 사용자가 또는 클라이언트와 상호 작용하는 웹 페이지에 동적으로 렌더링하는 새로운 콘텐츠 DOM 에 따라 사용자 상호 작용이다. 에 비해 코딩에서 Ruby on Rails(는 모든 rerender 필요한 전체 페이지를 새로 고침),능력 rerender 페이지 다양한 요소에 따라 사용자 상호 작용 Javascript 가져 내 프론트 엔드 개발 기술의 1994 년과로 존재한다. 나의 기초적인 이해의 자바스크립트,나는 지금을 만들 상호 작용하는 웹 요소가 되고 앞으로를 구현하는 내에서 프로젝트:상자 메시지 또는 팝업.
모달,또는 대화 상자가 나타나는 메시지 상자는 브라우저에서 후 지정한 사용자 상호 작용이다. 하기 전에 우리는 다이빙으로의 세부 사항을 만들기 모양 상자를 위한 당신의 사이트는 HTML,CSS,and Javascript,의 첫 번째 검토는 다양한 형태의 메시지자는 당신에 걸쳐 올 수 있습니다.
경고
경고 메시지 상자,일반적으로 잠기는 브라우저 내에서,요구하는 사용자 응답 또는 상호 작용하기 전에 그것을 해제할 수 있습에서 사라집니다. 아마도 클라이언트가 정보(이용 약관)를 인정하거나 페이지 자체가 양식 완성을 확인하기를 원할 것입니다. 그러나 경고가 기각 될 때까지 클라이언트는 나머지 페이지와 상호 작용할 수 없습니다.
팝업
는 팝업 스티커(생각하는’지팡이’로 페이지 않는 끈끈한 사탕 같은)상자 메시지 나타나는 브라우저에서 필요로하지 않는 즉각적인 상호 작용하거나 관심이다. 사용자가 사라지기를 원한다면 그 시간에 팝업을 닫거나 상호 작용해야하지만 나머지 페이지의 상호 작용은 여전히 기능적입니다. 알림은 팝업의 예입니다.
Growl Notification/Flash Notice
A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. 사용자 상호 작용할 수 있으로 으르렁거리 알—아마도 메시지 상자를 닫습니다 일찍하거나 버튼을 클릭 이내에 통지 또는 선택을 무시하고 그것은 사라질 것입 후 타이머가 만료됩니다. 팝업처럼 으르렁 거리는 알림은 클라이언트가 나머지 페이지와 계속 상호 작용할 수있게합니다. 이에 대한 예는 이메일 또는 소셜 미디어 알림입니다.
라이트 박스/극장
라이트 박스거나 극장은 메시지 상자는 일반적으로 확대하는 콘텐츠를 이미 사용할 수 있는 브라우저에서 사용자에 대해 오늘 함께 해주셔서 감사합니다. 일반적인 사용 사례는 갤러리에 표시되는 이미지 또는 일련의 이미지입니다. 경우 라이트 박스거나 극장가 사용되는 여러 개의 컨텐츠 것으로 간주됩’고정’때 사용자를 통해 탐색 할 수 있습 관련된 컨텐츠 라이트 내에 자체 반환하는 대신 원본 페이지와 그 이후에 클릭하면 다음 이미지는 시리즈에 확장됩니다.
Popover/올렸을 때 호버카드가
중 하나의 작은 메시지 상자,팝오버거나 올렸을 때 호버카드가만 화면에 표시할 때 사용자가 자신의 마우스를 통해 더 많은 공간을 제공합니다. 이러한 메시지 상자를 포함할 수 있는 지침이나 설명에 관한 버튼 또는 컨테이너는 사용자가 현재 유혹; 또한 사용자가 링크를 클릭하면 사용할 수있는 정보에 대한 미리보기가 포함될 수 있습니다.
모달/대화 상자
마지막으로,모달 또는 대화 상자가 메시지 상자할 수 있는 추가의 상호 작용없이 페이지에서 벗어나 현재의 콘텐츠에 브라우저입니다. 모달 상자가 화면에 잠겨 있지 않습니다(예: 일반적으로 사용자의 초점이지만(상자의 스타일을 기반으로 함)클라이언트는 필요한 상호 작용없이 멀리 탐색 할 수 있습니다. 대부분의 경우 사용자가 모달을 해제하려는 경우 제공된 버튼으로 상자를 닫거나 모달 외부를 클릭하기 만하면됩니다. 의 예에는 모달은 필요하신 경우 완전한 형태 또는 특정한 정보를 제공하 검색에 대한 쿼리,하지만 당신은 그들이 원하는 다른 페이지로 이동.
의 구현은 모달
하기 위해서 작성 및 구현 모달 페이지에서,세 가지가 있는 단계를 완료해야에 대한 기능:
- HTML:태그를 만드는 모달 요소
- CSS:스타일링 방법을 결정하는 모달 보고 페이지에 표시되
- Javascript: 배 이벤트에 청취자에게 모달이 나타나/에 따라 사용자 상호 작용
HTML
에 대한 간단한 조동,우리가 필요한 버튼(또는 어떤 페이지를 요소를 선호하는)사용자를 클릭 할 수 있습을 활성화하 모달하고,실제 모달,그리고 당신은 가능성을 구현하려고 닫기 버튼을 내에는 모달입니다.
<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<p>this is the text inside the modal</p>
</div>
</div>
위에서,당신은 당신이 볼 수있는 우리가 버튼이 나타납니다 내에서 우리의 HTML 뿐만 아니라,모달,세 CSS 클래스:modalmodal-btn,andclose-btn. 이들 각각은 아래의 CSS 에 포함될 것입니다. 첫 번째 div 는modal클래스가있는 전체 모달을 포함하는 상위 컨테이너입니다. 내부적으로,우리는 div 는 콘텐츠를 포함한 모달 자체:버튼을 닫 모달spanp태그이다.
옆으로 빠른,구현할 수도 있습니다 머리글과에서 당신의 모달에 의해 간단히 만들기 더 div 내 HTML 및 추 CSS 클래스 스타일링을 위한 목적입니다. 예를 들어:
<div class="modal">
<div class="modal-header">
<span class="close-btn">×</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>
CSS
스타일의 각 요소에 우리는 간단한 모달의 HTML,우리가 만들어야 할 관련 CSS 클래스:.modal.modal-content,and.close-btn. 또한,당신은 모달에 대한 애니메이션을 만들기 위해 포함 된 CSS 도 있다는 것을 아래에서 볼 수 있습니다.
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative;
background-color: white;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
위의 클래스에서는 HTML 에서 만든 각 요소에 대한 스타일링이 있습니다.
.modal클래스 자체 특성을 결정하는 방법을 취급 페이지 뒤에는 모달체: 의 너비와 높이에서 비교하려지지 대화 상자,색상(이 예제에 사용하는 반투명 회색)및 가시성을 설정하도록 우리가 그것을 전환할 수 있습에 자바스크립트 사용자가 버튼을 클릭.
위한 실제적인 대화 상자,우리는 또한 별도의 스타일링에서.modal-content:두 그것은 배경에 대해 스타일링,배경색 대화 상자에 대한 자체,패딩,그리고 이 예제에서 거기는 애니메이션을 포함하는 모달 방울을 아래에서 최고의 페이지입니다.
또한,우리는 스타일의.close-btn등 뜨는’x’,오른쪽과 함께.close-btn:hover사용자가 위에 마우스 커서를 올려놓을 닫기 버튼이,색상 변경됩니다. 명확성을 위해 사용자는 모달 외부를 클릭하여 닫기 버튼을 클릭하는 것과 동일한 대화 상자를 닫을 수 있습니다. 자바 스크립트에서 두 옵션 모두에 대한 이벤트 리스너를 만들 것입니다.
이것은 독자적으로 구현할 수있는 CSS 의 표면을 거의 긁지 않습니다. 자신의 필요에 가장 잘 맞도록 위의 코드를 자유롭게 조정하십시오.마지막으로 모달의 기능을 만들기 위해 몇 가지 자바 스크립트를 작성해야합니다.
let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
우리가 선택한 여러 가지 개체에서 우리의 HTML 및 할당된 그들에게 변수:modal-btnmodalclose-btnonclickmodal-btn"block”close-btn"none"modal-btn를 다시 클릭 할 때까지 모달을 효과적으로 숨 깁니다.
전반적인 재생,DOM 와 자바스크립트를 매우 재미 있고 보람으로 시작 coder. 위의 코드가 모달 및 메시지 상자를 자체적으로 구현하는 데 도움이되기를 바랍니다. 빠른 검색,당신은 또한 찾을 수 있습니다 추가 리소스를 조정하는 조동사과 대화 상자에 대한 사용 사례를 보여주고 있습니다.
거기에 행운을 빕니다,그리고 행복한 코딩!