web-dev-qa-db-ja.com

Bootstrap 4リモートモーダルで

新しいTwitter Bootstrap release：Bootstrap 4 alphaでは、Modalをリモートモードで動作させることはできません。 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>
jquerycsstwitter-bootstrapbootstrap-4
28
Zeeshan

問題が見つかりました： 彼らはbootstrap 4 のリモートオプションを削除しました

remote：このオプションはv3.3.0から廃止され、v4で削除されます。代わりに、クライアント側のテンプレートまたはデータバインディングフレームワークを使用するか、jQuery.loadを自分で呼び出すことをお勧めします。

JQueryを使用して、この削除された機能を実装しました。

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });
53
Zeeshan

公式文書によると、次のことができます（ 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)
})

だから、これが最良のアプローチだと思う：

$('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-content').load(e.relatedTarget.href);
});

ニーズに合わせて調整する

24
Marcelo Bonus

他のいくつかの答えと Bootstrap docs が示すように、Bootstrap 4はshow.bs.modalコンテンツをモーダルにロードするイベント。これは、HTML文字列またはリモートURLからコンテンツをロードするために使用できます。ここにの実例があります...

$('#theModal').on('show.bs.modal', function (e) {

    var button = $(e.relatedTarget);
    var modal = $(this);

    // load content from HTML string
    //modal.find('.modal-body').html("Nice modal body baby...");

    // or, load content from value of data-remote url
    modal.find('.modal-body').load(button.data("remote"));

});

ブートストラップ4リモートURLデモ

別のオプションは、Ajax呼び出しからデータが返されたらモーダルを開くことです...

  $.ajax({
       url: "http://someapiurl",
       dataType: 'json',
       success: function(res) {

           // get the ajax response data
           var data = res.body;
           // update modal content
           $('.modal-body').text(data.someval);
           // show modal
           $('#myModal').modal('show');

       },
       error:function(request, status, error) {
           console.log("ajax call went wrong:" + request.responseText);
       }
  });

Ajaxデモからブートストラップ4ロードモーダル

2
Zim

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

Jqueryスリムバージョン（すべてのBootstrap 4のドキュメントと例）を使用する場合、ロード関数は失敗します

フルバージョンのJqueryを使用する必要があります

0
David Sims

このプロセスは現在のダイナミックをロードしています。データリモート= "remoteContent.html"

<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
    Launch Modal
</a>
This trick :  data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" 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>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
0
user1520762