Simple Express EJS 모달

Question

안녕하세요 저는 노드 J를 처음 사용하고 있습니다. 이전에 부트 스트랩에 웹 페이지를 작성하고 멋진 콘텐츠를 만들었습니다. 이제 더 많은 고급 웹 응용 프로그램을 만들고 싶습니다.

각도 또는 반응을 사용하지 않습니다. 나는 Express와 EJS를 모두 쓰고 싶다. 제가 고심하고있는 곳은 EJS 템플릿 내에서 모달을 만드는 좋은 예입니다. 내가 찾을 수있는 모든 예는 부트 스트랩, 반응 또는 각도 특성입니다.

Events, Listeners 및 BodyPaser 컨트롤러에 대한 자세한 설명과 함께 작동하는 EJS 모달 템플릿을 코딩하는 방법을 배우는 데 도움이되는 훌륭한 리소스를 알려주십시오. 웹에 대한보고의 공정한 조금 내가 좋은 간단한 유튜브 예를 들어 내가 EJS 사원에 변환 할 수 있던 HTML을 CSS와 자바 팝업의 Creating quick, simple popup boxes을 발견 한 후

감사

던컨

Answer 1

확인 그리고 Sass 스타일.

Html 예제에서 다음 include 문을 내 기본 색인 ejs 페이지에 작성했습니다. 나는 페이지와 중앙 폴더에서 가져온하는 대신 모듈을 통해 코드를 반복 할 필요가 없습니다 내가 사용하고

<!-- CONTACT MODAL --> <div class="popup-position" id="contact-popup"> <%- include('./partials/modal'); %> </div>

은 문 및 부분 템플릿을 포함한다.

index.ejs의 맨 아래에 전화가있어서 일부 자바 스크립트가 이와 같습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="js/contact_modal.js"></script> 

모달 템플릿은 다음과 같습니다.

<div class="popup-wrapper"> 
<div id="popup-container"> 
    <h5>Contact Us</h5> 
    <form> 
     <div class="form-group"> 
      <label for="name">Name</label> 
      <input type="text" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label for="email">Email</label> 
      <input type="email" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label for="message">Message</label> 
      <textarea class="form-control"></textarea> 
     </div> 
    </form> 
    <div class="modal-footer"> 
     <button class="btn btn-primary btn-block">Submit</button> 
     <p><a herf="javascript:void(0)" onclick="toggle_visibility('contact-popup');">Close Popup</a></p> 
    </div> 
</div> 

는

모달 말대꾸이

// A Dark Overlay that sits between the main page and the modal so the Modal pops out 
.popup-position{ 
    display:none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.7); 
    width: 100%; 
    height: 100%; 

// The Modal Wrapper 
} 
#popup-wrapper{ 
text-align: left; 
} 

//The Modal Container 
#popup-container{ 

    background-color: #fff; 
    padding: 20px; 
    border-radius: 10px; 
    width: 300px; 
    margin: 70px auto; 

    a{ 
     cursor: pointer; 
    } 
} 

처럼 보인다 그리고 자바는이

//Modal Popup Controller 
function toggle_visibility(id){ 
    var e = document.getElementById(id); 

if(e.style.display == 'block') 
    e.style.display = 'none'; 
else 
    e.style.display = 'block'; 
} 

처럼 보이는 모든 즉, 자바가 온 클릭 기능을 사용 일어나고 'A'태그 또는 버튼을 사용하여 div id 'contact-popup'의 디스플레이 클래스를 'block'(디스플레이 드 오류) 및 '없음'. '차단'은 메인 페이지 상단에 팝업을 표시하고, '없음'은 팝업을 숨 깁니다.

매우 간단하고 제작하기 쉽고 상당히 견고하기 때문입니다.