bootstrap模式重新创建而不重新加载

时间:2017-09-23 14:48:15

标签: javascript bootstrap-modal reload

加载页面时会生成模态窗口的内容。 我可以在不重新加载页面的情况下通过JS重新生成此模态窗口的内容吗?

我的模态窗口:

<div class="modal-team-NtSubstitutePlayers modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    </div>
                    <div class="modal-body">
                        <div class="list-of-players text-center">
                            <div class="list">
                                @foreach($team->players as $player)
                                    @if ($player->ntsubstitute && !$player->ntskipnextmatch)
                                        <a class="player_choose" id="player_id_substitute_{{$player->id}}">
                                            <div class="player">
                                                ....
                                            </div>
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

1 个答案:

答案 0 :(得分:0)

<强> HTML ID添加到模态。

<div id="myModal" class="modal-team-NtSubstitutePlayers modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    </div>
                    <div class="modal-body">
                        <div class="list-of-players text-center">
                            <div class="list">
                                @foreach($team->players as $player)
                                    @if ($player->ntsubstitute && !$player->ntskipnextmatch)
                                        <a class="player_choose" id="player_id_substitute_{{$player->id}}">
                                            <div class="player">
                                                ....
                                            </div>
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<强>的JavaScript

//Show the modal
$("#myModal").modal("show");

//Reload the modal content
var modalHtml = $("#myModal").html();
$("#myModal").html("");
$("#myModal").html(modalHtml);

//Hide the modal
$("#myModal").modal("hide");