详解处理bootstrap4不支持远程静态框问题


Posted in Javascript onJuly 20, 2018

起步

我就是喜欢用新的,况且 bs4 出来也很久了,用了一段时间后发现它并不支持远程静态框了,查了一下这部分已经被移除了。

详解处理bootstrap4不支持远程静态框问题 

所以,以前的 <a data-toggle="modal" href="remote.html" rel="external nofollow" 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="external nofollow" 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 #Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 #Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
Vue中的异步组件函数实现代码
Jul 20 #Javascript
vue 中的keep-alive实例代码
Jul 20 #Javascript
Angularjs实现页面模板清除的方法
Jul 20 #Javascript
搭建vue开发环境
Jul 19 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python读取图片任意范围区域
2019/01/23 Python
实例介绍Python中整型
2019/02/11 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
介绍一下write命令
2014/08/10 面试题
退休欢送会致辞
2015/07/31 职场文书
四年级数学教学反思
2016/02/16 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
JVM之方法返回地址详解
2022/02/28 Java/Android
微信小程序实现轮播图指示器
2022/06/25 Javascript