详解处理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 相关文章推荐
异步动态加载js与css文件的js代码
Sep 15 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
Vue中props的使用详解
Jun 15 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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里得到前天和昨天的日期的代码
2007/08/16 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php获取操作系统语言代码
2013/11/04 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
单元选择合并变色示例代码
2014/05/26 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python gdal安装与简单使用
2019/08/01 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python实现简单井字棋游戏
2020/03/04 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
举例讲解Python装饰器
2020/12/24 Python
会计专业应届生求职信
2013/11/24 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
毕业证委托书范文
2014/09/26 职场文书
慰问信格式
2015/02/14 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
小学教师读书笔记
2015/07/01 职场文书