Question

我有一个显示事件列表的网页，可以单击每个事件以获取该事件的详细信息。

我的问题是数据的加载需要时间，我想显示第一个显示加载条的模式，然后显示包含此事件详细信息的第二个模式。

起初，没有什么很复杂的，但是我有第二种模式打开得太早，然后它们都出现在屏幕上，我也不知道如何解决它。

事件列表

<tbody>
    @foreach (var item in Model._EventsLines)
    {
        <tr>
            <td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.Zkp" onclick="GetEventsDetails(this.id)">@item.Event_Name</a></td>
            <td>@item.Event_DateStart.ToShortDateString()</td>
            <td>@item.Event_DateEnd.ToShortDateString()</td>
            <td>@item.Event_Status</td>
        </tr>
    }
</tbody>

模式

@* Modal with Event details and SubEvents*@
<div class="modal fade" role="dialog" id="myModal" tabindex="-1" aria-labelledby="myModal" aria-hidden="true" style="display: none">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div id="myModalContent">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@* Modal for Loading*@
<div class="modal" role="dialog" id="myModalLoading" tabindex="-1" aria-labelledby="myModalLoading" aria-hidden="true" style="display: none">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

JS代码

<script type="text/javascript">

    function GetEventsDetails(id) {
        $('#myModal').hide();
        $('#myModalLoading').show();
        var idd = id;

         $.get("@Url.Action("GetEventsDetails", "Events")/" + idd,
            function (data) {
                $('#myModal').hide();
                $('#myModalLoading').hide();
                $('.modal-body').html(data);
                $('#myModal').show();
            }
        )
    }
</script>

编辑/

我注意到，如果我在第二个模态类中添加“淡入淡出”，它甚至根本不会显示。

我首先也只想拥有一个模态，然后先显示进度条，然后在加载数据时隐藏进度条，并以模态显示数据，但是我只在第一次使用，然后当我单击另一个事件（或相同事件）时，进度条不显示。.我不明白，这就是为什么我尝试使用第二个模式（和单独）来做到这一点。

我也试图通过＃来更改href，因为我很难解决这个问题，但是如果我这样做，该模式甚至都不会打开（因为我的函数中有一个.show，所以我没有得到什么）。

以下是我提供的一些屏幕截图，它可以帮助您了解无效的内容：

当我进入页面并单击一个事件时：

当我关闭模态时，我单击另一个（或相同的）事件：

如果我想再次达到第一种行为，我必须重新加载该网站，并且当然它仍然会执行一次...

编辑2 //

我想我现在要关闭了！我已经这样更改了href：

<td><a href="#myModalLoading" class="myModal" data-toggle="modal" id="@item.Zkp" onclick="GetEventsDetails(this.id)">@item.Event_Name</a></td>

因此，现在它打开了良好的加载模式，然后在加载数据时关闭了加载模式并显示了第二个模式。

我现在的问题是，如果我在第二个模态中让class =“ modal fade”消失了，那么它就不会显示出来。所以我不得不删除以class =“ modal”代替它。看起来不错，但我无法将其关闭：D

（我可以关闭加载模式，但不能关闭包含数据的模式。我知道它与href有关，我想也可以切换数据，但是有办法解决吗？）

有什么主意吗？

这是最后一个JS代码：

function GetEventsDetails(id) {


    var idd = id;

         $.get("@Url.Action("GetEventsDetails", "Events")/" + idd,
             function (data) {
                 $('#myModalLoading').hide();
                 $('#myModal').show();
                 $('.modal-body').html(data);
            })
}

Answer 1

好，我终于想出了一个为我工作的解决方案。

我设法用一个模态来做到这一点，他首先显示进度条，然后在模态中加载数据时隐藏进度条并显示数据！

模式

<div class="modal fade" role="dialog" id="myModal" tabindex="-1" aria-labelledby="myModal" aria-hidden="true" style="display: none">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div class="progress" id="loadingBar">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
                </div>
                <div id="myModalContent">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JS

function GetEventsDetails(id) {

    $('#myModalContent').html("");
    $('#loadingBar').show();

    var idd = id;

         $.get("@Url.Action("GetEventsDetails", "Events")/" + idd,
             function (data) {
                 $('#loadingBar').hide();
                 $('#myModalContent').html(data);         
            })
}

一次显示2种不同的模态

1 个答案: