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

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

用于bootstrap 3的数据远程模态体加载条

2 个答案: