Node.js 表达请求 - 淡入淡出 bootstrap 模态请求错误

Question

我正在使用 node.js express 快速会话和请求。如果请求有错误，我会淡入淡出 bootstrap 警报消息。这行得通。但是如果我想淡入和淡出 bootstrap 模态……这是行不通的。这是我的设置：

script.js

$(document).ready(function(){

    // alerts
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove();
        });
    }, 4000);

    // modals
    window.setTimeout(function() {
        $("#myModal").fadeIn('slow', function(){
            $(this).modal('hide');
            });
    }, 4000);

});

modalError.ejs

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <%= messages.error %>
      </div>
    </div>
  </div>
</div>

alertError.ejs

<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= messages.error %>
</div>

login.ejs

<html>
    <body>
        <div>   
            <% if (messages.error) { %>
                <% include partials/alertError %>
            <% } %>

            <% if (messages.error) { %>
                <% include partials/modalError %>
            <% } %>
        </div>
        <% include partials/script %>
    </body>
</html>

有人有解决办法吗？

在请求中，我正在检查状态：

if(getStatus == 401){
  req.flash('error', 'An error occurred during login.') 
  res.redirect('/login')
}

Answer 1

您可以在脚本中访问 ejs 变量，

<script>
    if(messages.error){
     $("#myModal").modal('show');
    }   
</script>

Answer 2

Bootstrap 模态确实有褪色效果。但是过渡时间比较少，尝试增加效果会更突出。

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

Node.js 表达请求 - 淡入淡出 bootstrap 模态请求错误

Node.js express request - Fade in and out bootstrap modal on request error

ejs

node.js

express

twitter-bootstrap-3

node-request