带有远程模态的引导程序 4

Posted 2023-03-06

【中文标题】带有远程模态的引导程序 4

【英文标题】：Bootstrap 4 with remote Modal

【发布时间】：2016-04-18 05:09:27

【问题描述】：

我无法使用新的 Twitter Bootstrap 版本使 Modal 在远程模式下工作：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  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>

【参考方案1】：

发现问题：They have removed the remote option in 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"));
    );  

【讨论】：

赞成。它可以工作，只是为了澄清，它将从 data-remote="your_own_url" 加载并将其放置在 data-target="#myModel" 的 "modal-body" 上，您可能需要将 "model-body" 更改为您要放置数据的地方，例如“模态内容”

就我而言，我使用了.load($(this).attr('href'))。

对我来说，因为我有多个模式，我使用了$('body').on('click.modal.data-api', '[data-toggle="modal"]', function() $($(this).data("target")+' .modal-content').load($(this).attr('href')); );

最佳答案

我改进了模态选择器以仅选择具有data-remote 属性的元素，如下所示：$('body').on('click', '[data-toggle="modal"][data-remote]', function() /* ... */ );

【参考方案2】：

根据官方文档，我们可以这样做(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()。

适应您的需求

【讨论】：

如果不是按钮而是锚标签，如何获取自定义数据属性（data（'whatever'））？我有 $(event.relatedTarget).data('whatever') 未定义。

@Muflix - 这对我有用：$(event.relatedTarget).attr('data-whatever')

【参考方案3】：

正如其他一些答案和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"));

);

Bootstrap 4 Remote URL Demo

---

另一种选择是在从 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);
       
  );

Bootstrap 4 Load Modal from Ajax Demo

【讨论】：

我想加载一个弹出表单，点击“注册”gist.github.com/anonymous/5b4d764ad2edbe213344bdd7320754ef后会跳转到另一个页面示例 register.htmlgist.github.com/anonymous/5b4d764ad2edbe213344bdd7320754ef

这在同一个域上完美运行。请注意，如果您尝试使用模式链接到外部内容，您很可能会遇到 CORS 问题。

【参考方案4】：

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

【参考方案5】：

如果您使用 Jquery slim 版本（如在所有 Bootstrap 4 文档和示例中），加载功能将失败

需要使用完整版的Jquery

【参考方案6】：

此过程正在加载当前动态。数据远程 = "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>

【讨论】：

如您所见，有两个数据远程代码。一个是 data-remote="remoteContent.html"，另一个是 data-remote="true"。

不适用于 Bootstrap4，远程选项已被删除。正如@Zeeshan 的示例中提到的那样。