39

新しい Twitter Bootstrap リリース : Bootstrap 4 alpha では、モーダルをリモート モードで動作させることができません。Bootstrap 3 では問題なく動作します。Bootstrap 4 ではポップアップ ウィンドウが表示されますが、モデル本体が読み込まれません。myRemoteURL.doモデル本体をロードするためのリモート呼び出しはありません。

コード：

<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>

<!-- Model -->
<div class="modal fade" id="myModel" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="myModalLabel">Model Title</h3>
            </div>
            <div class="modal-body">
                <p>
                    <img alt="loading" src="resources/img/ajax-loader.gif">
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
4

6 に答える 6

34

公式ドキュメントによると、次のことができます ( https://getbootstrap.com/docs/4.1/components/modal ):

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
})

したがって、これが最善のアプローチだと思います（BS 5でも機能します）：

<!-- Button trigger modal -->
<a data-bs-toggle="modal" data-bs-target="#modal_frame" href="/otherpage/goes-here">link</a>

<!-- Modal -->
<div class="modal fade" id="modal_frame" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- Completes the modal component here -->
</div>

<script>
  $('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-body').load(e.relatedTarget.href);
  });
</script>

e.relatedTarget は、モーダルをトリガーする anchor() です。

ニーズに適応

于 2016-12-01T14:08:40.917 に答える
1

Asp.NET MVC では、これでうまくいきます

html

<a href="#" onclick="Edit(1)">Edit item</a>
<div class="modal" id="modalPartialView" />

jquery

<script type="text/javascript">
        function Edit(id)
        {
            $.ajax({
                url: "@Url.Action("ActionName","ControllerName")",
                type: 'GET',
                cache: false,
                data: {id: id},
            }).done(function(result){
                $('#modalPartialView').html(result)
                $('#modalPartialView').modal('show') //part of bootstrap.min.js
            });
        }
<script>

アクション

public PartialViewResult ActionName(int id)
{
   // var model = ...
   return PartialView("_Modal", model);
}
于 2018-08-09T09:00:09.717 に答える