javascript - Bootstrap 3 的数据远程模态主体加载栏

Question

下面是我编辑车辆模态调用的代码

<?php for($i=0;$i<count($vhcl);$i++){
echo "<a data-toggle='modal' href=' ' data-remote='using/vehicles/vehicle-form.php?id=".$vhcl[$i]['mvid']."&m=e' data-target='#vehicle-modal'><i class='icon-pencil color-orange'></i></a>";
} ?>
<div class="modal fade" id="vehicle-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

现在，当我第一次点击此链接时，需要几秒钟时间，然后会出现带有第一个车辆编辑数据的模态，

但是现在，当我点击第二个车辆模式时，会立即出现相同的数据，并在 2 3 秒后刷新(在慢速连接中也可能需要更多时间)。

所以问题是我们可以完成任何模态主体加载检查吗？

在模态主体加载新的刷新数据之前，加载图像应该在模态主体中，然后是实际数据。

Answer 1

您可以执行以下操作:

尝试使用 javascript 而不是属性调用模态。在模态开始下载远程路径内容之前，您可以删除模态内容。

This is example in JSFiddle

HTML:

<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/22/show/'><i class='icon-pencil color-orange'></i></a>
<br/>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/40/show/'><i class='icon-pencil color-orange'></i></a>
<div id="modal"></div>

Javascript:

$(function(){    
    $("a.open-modal").click(function(e){
        e.preventDefault();
        var modal=$("#modal");
        modal.empty();
        modal.append("<div class='modal fade modal-dialog' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'></div>");
        $('.modal-dialog').modal({
            remote:$(e.currentTarget).attr("data-remote")
        });
    });
});

---

编辑:

您还可以在加载时放置一些图像或文本，例如“正在加载...”。

This is example in JSFiddle

HTML:

<span id="onLoad" style="position:absolute;left:100px;top:100px;z-index:1000000;" hidden>Loading...</span>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/22/show/'><i class='icon-pencil color-orange'></i></a>
<br/>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/40/show/'><i class='icon-pencil color-orange'></i></a>
<div class='modal fade' id='modal-dialog' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'></div>

Javascript:

$(function(){      
    $("a.open-modal").click(function(e){
        $('#onLoad').show();        
        e.preventDefault();
        var modal=$("#modal-dialog");
        modal.empty();        
        modal.modal({
        }).load($(e.currentTarget).attr("data-remote"), function (e) {
            $('#onLoad').hide();
        });
    });
});