我有一个从链接启动的Bootstrap模式。在AJAX查询从数据库中获取数据的同时,它只停留在空白处约3秒钟。如何实现某种负载指示器?默认情况下,twitter引导程序是否提供此功能?
编辑:模态的JS代码
<script type="text/javascript"> $('#myModal').modal('hide'); $('div.divBox a').click(function(){ var vendor = $(this).text(); $('#myModal').off('show'); $('#myModal').on('show', function(){ $.ajax({ type: "GET", url: "ip.php", data: "id=" + vendor, success: function(html){ $("#modal-body").html(html); $(".modal-header h3").html(vendor); $('.countstable1').dataTable({ "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ records per page" }, "aaSorting":[[0, "desc"]], "iDisplayLength": 10, "oTableTools": { "sSwfPath": "swf/copy_csv_xls_pdf.swf", "aButtons": ["csv", "pdf"] } }); } }); }); }); $('#myModal').on('hide', function () { $("#modal-body").empty(); }); </script>
我猜您正在使用jQuery.get或其他jQuery ajax函数来加载模态。您可以在ajax调用之前显示指示器,并在ajax完成后将其隐藏。就像是
$('#indicator').show(); $('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });