リンクがトリガーされたときにモーダルを表示する

Question

私はPHPプロセスを使用してExcelファイルを生成しています。私はモーダルをトリガーして、少し待つように指示します。

は、ここに私のコード

$('#export-excel').click(function(){ 
     this.href = this.href + location.search; 
     $.ajax({ 
      beforeSend: function() { 
       $('#myModal').show(); 
      }, 
      statusCode:{ 
       500: function(){ 
        //Error PHP 
       }, 
       404: function(){ 
        //Erreur dans ta route 
       }, 
       200: function(){ 
        $('#myModal').hide(); 
       } 
      } 
     }); 
    }); 

だと誰かが良いでしょう私のために何かを持っている場合、リンクは

<a id="export-excel" class="btn btn-sm btn-menu" href="{{ path('plateforme_reassort_generationexcel') }}" title="Exporte les articles filtrés au format Excel">Export Excel</a> 

です！

Answer 1

jQuery Documentation：

$('#myModal').modal()      // initialized with defaults 
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard 
$('#myModal').modal('show')    // initializes and invokes show immediately 

$('#export-excel').click(function(){ 
     this.href = this.href + location.search; 
     $.ajax({ 
      beforeSend: function() { 
       $('#myModal').modal('show'); 
      }, 
      statusCode:{ 
       500: function(){ 
        //Error PHP 
       }, 
       404: function(){ 
        //Erreur dans ta route 
       }, 
       200: function(){ 
        $('#myModal').modal('hide'); 
       } 
      } 
     }); 
    }); 

基本的な例：として使用法を述べて

$(function() { 
 
    $(".custom-close").on('click', function() { 
 
    $('#myModal').modal('hide'); 
 
    }); 
 
    setTimeout(function() { 
 
    $('#myModal').modal('show'); 
 
    setTimeout(function() { 
 
     $('#myModal').modal('hide'); 
 
    }, 2000) 
 
    }, 500) 
 
});

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
 
<!-- Button trigger modal --> 
 
<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" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 

 

 
     WILL CLOSE IN 2 secs.... 
 

 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

Answer 2

私はJQueryモーダルのモーダル関数を使うべきだと思います。

$('#export-excel').click(function(){ 
     this.href = this.href + location.search; 
     $.ajax({ 
      beforeSend: function() { 
       $('#myModal').modal('show'); 
      }, 
      statusCode:{ 
       500: function(){ 
        //Error PHP 
       }, 
       404: function(){ 
        //Erreur dans ta route 
       }, 
       200: function(){ 
        $('#myModal').modal('hide'); 
       } 
      } 
     }); 
    });