Как отобразить вид руля как модальное всплывающее окно Bootstrap

У меня есть приложение узла js, которое обрабатывает все клиентские запросы. Я создал вид с помощью плагина Express Handlebars. Так что у меня есть основной макет и несколько видов и частичных. Основной макет получает представления в теле и показывает полную веб-страницу.

mainlayout.handlebar

<!DOCTYPE html>
   <html>
   <head>
       {{>vihead}} <!-- partial with the css includes -->
       <title>My APP</title>
   </head>
   <body>
       <div class="container">
             {{>vinav}} <!-- partial to show the nav bar -->
       </div>
       <div class="container">
               <div class="row">
                   <div class="col-lg-12">         
                       {{{body}}}
                   </div>
               </div>
           <footer class="col-12 py-3 bg-light">
               <p>&copy; 2018 myAPP, Inc.</p>
           </footer>
       </div> <!-- /container -->
       <!-- SCRIPTS -->
       {{>viscripts}} <!-- partial with the js scripts includes -->
   </body>
   </html>

Частичный vinav.handlebars - это панель навигации, включенная в основной макет. Он показывает панель навигации с "Логин", "Зарегистрироваться", ("Выход из системы", если зарегистрирован) и "Панель инструментов". Страница панели мониторинга всегда отображается, даже если пользователь не вошел в систему.

vinav.handlebars

<nav class="navbar navbar-expand-lg navbar-light bg-faded">
    <a class="navbar-brand" href="#">MY APP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-md-auto">
            {{#if user}}
                <li class="nav-item"><a class="nav-link" href="/">{{useremail}}</a></li>
                <li class="nav-item"><a class="nav-link" href="/users/logout">Logout</a></li>
            {{else}}
                <li class="nav-item" ><a class="nav-link" href="/users/login">Login</a></li>
                <li class="nav-item" ><a class="nav-link" href="/users/register">Register</a></li>
            {{/if}}
            <li class="nav-item active"><a class="nav-link" href="/">Dashboard <span class="sr-only">(current)</span></a></li>
        </ul>
    </div>
</nav>

Так, например, если пользователь нажимает "Логин", сервер получает команду /users/login и отправляет обратно представление руля входа в систему, которое будет вставлено в {{{body}}} основного макета.

login.handlebars

<h2 class="page-header">Account Login</h2>
<form method="post" action="/users/login">
  <div class="form-group">
    <label>EMail</label>
    <input type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

То же самое для Регистрации. Все отлично работает

Теперь я хочу показать страницу входа в виде всплывающего окна Bootstrap 4 в основном макете. Я имею в виду, что когда пользователь нажимает "Login" в навигационной панели, я хочу показать страницу входа во всплывающем диалоговом окне Bootstrap 4, поэтому что страница панели инструментов по-прежнему отображается в фоновом режиме.

Я провел весь день, пытаясь найти способ показать и обработать всплывающее окно, но я не смог найти решение.

Я знаю, что руль лишен логики, поэтому я не могу добавить чистый JavaScript. Я также знаю, что у него есть помощники, но я не могу понять, как справиться с этим с помощью помощника.

Всплывающее окно для входа в систему может быть что-то вроде этого (и другое похожее для регистрации):

loginpopup.handlebars

<!-- The boostrap modal login popup-->
<div class="modal fade" id="bpopup" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      <!-- this is the login.handlebars shown above -->
      <h2 class="page-header">Account Login</h2>
      <form method="post" action="/users/login">
         <div class="form-group">
           <label>EMail</label>
           <input type="text" class="form-control" name="email" placeholder="Email">
         </div>
         <div class="form-group">
           <label>Password</label>
           <input type="password" class="form-control" name="password" placeholder="Password">
         </div>
         <button type="submit" class="btn btn-default">Submit</button>
      </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Любая идея? Кто-нибудь может мне помочь?

Спасибо заранее

Роберто

Источник

0 ответов

Другие вопросы по тегам