带有远程 Modal 的 Bootstrap 4 [英] Bootstrap 4 with remote Modal

查看：24
本文介绍了带有远程 Modal 的 Bootstrap 4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法使用新的 Twitter Bootstrap 版本:Bootstrap 4 alpha 使 Modal 在远程模式下工作.它与 Bootstrap 3 一起工作得很好.使用 bootstrap 4 我得到了弹出窗口，但模型主体没有被加载.没有对 myRemoteURL.do 进行远程调用来加载模型主体.

代码:

<div class="modal-body"><p><img alt="loading" src="resources/img/ajax-loader.gif"></p>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交</button>

解决方案

发现问题:他们已经删除了引导程序 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"));});

I can't make the Modal work in the remote mode with the new Twitter Bootstrap release : Bootstrap 4 alpha. It works perfectly fine with Bootstrap 3. With bootstrap 4 I am getting the popup window, but the model body is not getting loaded. There is no remote call being made to myRemoteURL.do to load the model body.

Code:

<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>

解决方案

Found the problem: They have removed the remote option in bootstrap 4

remote : This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

I used JQuery to implement this removed feature.

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

这篇关于带有远程 Modal 的 Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆