用于引导的数据远程模态主体加载栏 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 而不是属性调用模态。在模式开始下载远程路径内容之前，您可以删除模式内容。

这是 JSFiddle 中的示例

目录：

<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")
        });
    });
});

---

编辑：

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

这是 JSFiddle 中的示例

目录：

<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();
        });
    });
});

Answer 2

这是基于@Nicolai解决方案的更简单的解决方案我在使用上述解决方案时遇到了问题，那就是我也在发布我的解决方案，以便将来有人可以正确获得它:)

.HTML：

<a class="open-custom-modal" data-remote="/url/1" data-toggle="modal" data-target="#custom_modal">URL 1</a>
<br />
<a class="open-custom-modal" data-remote="/url/2" data-toggle="modal" data-target="#custom_modal">URL 1</a>
<div class="modal fade" id="custom_modal" tabindex="-1" role="dialog" aria-labelledby="custom_modal_label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

JavaScript：

$(function() {
    $("a.open-custom-modal").click(function(e) {
        e.preventDefault();
        $('#custom_modal').modal({
         }).find('.modal-body').load($(e.currentTarget).attr("data-remote"), function(e) {
            //loading completes here
         });
    });
});