内容简介：我就是喜欢用新的，况且 bs4 出来也很久了，用了一段时间后发现它并不支持远程静态框了，查了一下这部分已经被移除了。所以，以前的
起步
我就是喜欢用新的，况且 bs4 出来也很久了，用了一段时间后发现它并不支持远程静态框了，查了一下这部分已经被移除了。
所以，以前的 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> 这种写法就没法用了，因此这部分要手动处理下。
处理
处理的方式其实也比较简单，改成手动 load 而已，按照 bs3 的效果是远程结果取代静态框中的 modal-content 部分:
<button data-toggle="modal" data-remote="remote.html" data-target="#modal">Click me</button>
<script>
$('#modal_result').on('hidden.bs.modal', function (e) {
$(this).find('.modal-body').html(' 等待结果，请稍后...');
$(this).removeData('bs.modal');
}).on('show.bs.modal', function (e) {
// 手动处理下载入过程
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-content').load(button.data("remote"));
});
</script>
完整demo
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Codeply preview</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<button data-toggle="modal" class="btn btn-primary" data-remote="a.html" data-target="#modal">Click me</button>
<div id="modal" class="modal fade">
<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">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
等待结果，请稍后...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--scripts loaded here-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
$('#modal').on('hidden.bs.modal', function (e) {
$(this).find('.modal-body').html(' 等待结果，请稍后...');
$(this).removeData('bs.modal');
}).on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-content').load(button.data("remote"));
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 静态类型检查器 Mypy 0.620 发布，支持 Data Classes
- PHPKafka 1.1.3 发布，引入代码标准检测及静态分析工具，支持腾讯云 ckafka
- 《两周自制脚本语言》——第十四天（让Stone语言支持静态类型以优化性能）
- Mybatisplus-plus 1.1.0 发布，xml 中省略包名调用静态方法并支持 lambda
- 静态库遇到静态库
- 全局变量，静态全局变量，局部变量，静态局部变量
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Programming Amazon Web Services
James Murty / O'Reilly Media / 2008-3-25 / USD 49.99
Building on the success of its storefront and fulfillment services, Amazon now allows businesses to "rent" computing power, data storage and bandwidth on its vast network platform. This book demonstra......一起来看看 《Programming Amazon Web Services》 这本书的介绍吧!
