簡單的Express EJS Modal

-2

嗨，我是新的Node Js和表達。我以前在Bootstrap中編寫過網頁，並創建了一些不錯的內容。現在我想創建更多先進的Web應用程序。簡單的Express EJS Modal

我沒有使用Angular或React。我想簡單地寫下Express和EJS的每一件事情。我在掙扎的地方是在EJS模板中創建Modal的一個很好的例子。我可以找到的所有示例都是Bootstrap，React或Angular特定的。

任何人都可以給我一個很好的資源來學習如何編寫一個工作的EJS模態模板，並詳細解釋事件，監聽器和BodyPaser控制器。

感謝

鄧肯

來源

2017-10-16 DuncanG

Mr.Duncan歡迎使用堆棧溢出請仔細閱讀此內容當您詢問有關由代碼導致的問題的問題時，如果您提供可用於重現問題的代碼，您將得到更好的答案。 https://stackoverflow.com/help/mcve – core114

確定後，尋找有關Web公平一點我發現了一個偉大的簡單的Youtube例如HTML教程和Java彈出，這點我是能夠轉換成EJS寺廟Creating quick, simple popup boxes和Sass造型。

從Html示例中創建以下include語句到我的主索引ejs頁面。

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

我使用包括報表和部分模板，這樣我就不必跨頁以及從中央文件夾帶來代替模塊重複碼。

index.ejs的底部有一個調用，所以這樣的一些Java腳本。

<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; 
    } 
}

和Java看起來像這樣

//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'; 
}

所有這一切都被使用的onclick功能java的發生'A'標記或按鈕來切換div'contact-popup'的顯示類，'block'（顯示屏故障）和'無'。 'block'在主頁面的頂部顯示Popup，而'none'隱藏Popup。

因爲它非常簡單，易於構建和相當強大。

來源

2017-10-23 13:47:55 DuncanG

簡單的Express EJS Modal

回答

相關問題