简单的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

回答

相关问题