Question

我尝试使用JS显示警报并使其自动消失。但是，我希望它逐渐消失。如何添加动画？我也希望始终在窗口中央发出警报。

＆＃13;

socket.on('message', function (dataContent) {
  
  $( document ).ready(function() { $('#myModal').modal('show'); });


    setTimeout(showAlert(1), 3000);

});

function showAlert(hideAfter) {
    $('#myModal').modal('show');
    if(hideAfter) {
        setTimeout(fadeItOut, 5000);
    }
}

function fadeItOut() {
    $('#myModal').modal('hide');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
          Your "alert" message here.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>



<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"-->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>

＆＃13;

Answer 1

您可以使用CSS3动画。例如，在Chrome中，定义CSS，如：

#success-alert {
  -webkit-animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Answer 2

＆＃13;

function showAlert(hideAfter) {
  $('#myModal').modal('show'); 
  if(hideAfter) {
    setTimeout(fadeItOut, 5000);
  }
}

function fadeItOut() {
  $('#myModal').modal('hide'); 
}

// Jquery has loaded
$( document ).ready(function() {
    setTimeout(showAlert(1), 3000);
});

＆＃13;

 .fade {
   opacity: 0;
   -webkit-transition: opacity 2.25s linear !important;
      -moz-transition: opacity 2.25s linear !important;
       -ms-transition: opacity 2.25s linear !important;
        -o-transition: opacity 2.25s linear !important;
           transition: opacity 2.25s linear !important;
 }

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>



<!-- 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">
        Your "alert" message here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

您是否考虑使用引导模式？

http://getbootstrap.com/javascript/#modals

你可以比警告框更好地设置样式，并设置超时功能以允许它淡出。你有选择使用jquery和bootstrap吗？如果是这样，我很乐意为您准备一个简单的演示。

编辑以显示您请求的初始功能。如果您想从这里改变，我们将很乐意为您提供协助。

基本上，只要加载了jquery，我就设置了一个超时功能，它会触发你的警报，然后是另一个超时功能，可以在几秒钟后隐藏它。您也可以通过单击按钮来触发模态。

您可以调用showAlert（0）来显示模态，而不是自动关闭。同样，您可以随时调用fadeItOut（）来隐藏它。

如何制作警报动画？

2 个答案: