数据.引导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

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

​

编辑：

​

您也可以放置一些图像或文本，如“加载.”装货的时候。

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