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

起步

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

所以，以前的 <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap 模态框多次显示后台提交多次BUG的解决方法

    模态框 Bootstrap Modal Bootstrap 的模态框使用Bootstrap 的前端应该都接触过. 本文记录一下今天使用时遇到的 BUG,以便以后查阅和帮助其他遇到同样问题的伙伴们. BUG 情景 使用场景 触发展现模态框,填写对应的信息,然后 ajax 提交表单信息到后台. 简化 点击下面的按钮一次,弹出模态框.点击提交,会直接 alert("提交") .点击一次会觉得很正常,但是如果你重复点几次模态框,会发现再次点击 提交 ,alert 会出现多次. 简书无法展现效果

  • bootstrap 弹出框modal添加垂直方向滚轴效果

    效果图预览 1. 添加css样式 .modal-dialog{position: absolute; top: 0; bottom: 0; left: 0; right: 0;} .modal-content{/*overflow-y: scroll; */ position: absolute; top: 0; bottom: 0; width: 100%;} .modal-body{overflow-y: scroll; position: absolute; top: 55px; bott

  • 解决在Bootstrap模糊框中使用WebUploader的问题

    解决在Bootstrap模糊框中使用WebUploader的问题

    在我毕设项目中有个需求是在Bootstrap模糊框中显示WebUploader的上传按钮,效果如下: 我们直接在Bootstrap的模糊框中插入了上传的组件: 然而实际效果却是当模糊框出现之后,却无法点击到上传按钮. 然而在我按F12想要查看控制台是否出错后,WebUploader居然可以弹出文件选择框,而且其他功能也都正常了. 经过查阅资料发现:出现Bug的原因是[选择文件]按钮的长宽都是0,需要重新渲染一下网页,而F12正好有渲染网页的功能,解决方案就是重新渲染或实例化Uploader.需要

  • bootstrap 点击空白处popover弹出框隐藏实例

    代码: <div> <a class="btn btn-success show" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容"> aaaa </a>

  • React BootStrap用户体验框架快速上手

    官方文档http://react-bootstrap.github.io/getting-started.html 安装 在终端cd到你的项目目录下执行:$ npm install react-bootstrap 然后需要我们手动引用css <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr

  • Bootstrap Table中的多选框删除功能

    先上代码,后面再进行详细解释: //删除按钮事件 $("#remove").on("click", function () { // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的,所以说一定要使用bootstrapTable显示表格,#table:为table的id var rows = $("#table").bootstrapTable('ge

  • bootstrap中selectpicker下拉框使用方法实例

    bootstrap中selectpicker下拉框使用方法实例

    前言 最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css     bootstrap-sele

  • 响应式框架Bootstrap栅格系统的实例

    响应式框架Bootstrap栅格系统的实例

    实例如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="

  • bootstrap treeview 树形菜单带复选框及级联选择功能

    具体代码如下所示: <div id="searchTree"></div> <script> var treeData = [{ text: "Parent 1", nodes: [{ text: "Child 1", nodes: [{ text: "Grandchild 1" }, { text: "Grandchild 2", nodes: [{ text: &qu

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

    起步 我就是喜欢用新的,况且 bs4 出来也很久了,用了一段时间后发现它并不支持远程静态框了,查了一下这部分已经被移除了. 所以,以前的 <a data-toggle="modal" href="remote.html" rel="external nofollow" data-target="#modal">Click me</a> 这种写法就没法用了,因此这部分要手动处理下. 处理 处理的方式其实也

  • 详解Linux使用shell+expect远程登录主机

    详解Linux使用shell+expect远程登录主机 最近使用Ubuntu系统想远程登录自己的vps主机,但是感觉自带的远程登录软件不太好使.于是乎想着怎么使用shell脚本来登录,于是Google之后整理了一下,记录一下,方便以后用到. 1.准备工作:安装expect for Ubuntu sudo apt-get update sudo apt-get install expect for Centos yum install expect 2.新建脚本粘贴以下内容 #!/usr/bin/

  • SpringBoot详解如果通过@Value注解给静态变量注入值

    SpringBoot详解如果通过@Value注解给静态变量注入值

    目录 前序 方案一 方案二 方案三 使用场景 总结 最近做项目的时候,给static变量赋值, 使用 @value注解 ,结果 获取一直为null , 1.spring不允许/不支持把值注入到静态变量中 2.Spring的@Value依赖注入是依赖set方法 3.set方法是普通的对象方法 4.static变量是类的属性,static没有set方法 前序 SpringBoot中使用@Value()只能给普通变量注入值,不能直接给静态变量赋值 例如,application-dev.properti

  • 详解配置 Apache 服务器支持 PHP 文件的解析

    详解配置 Apache 服务器支持 PHP 文件的解析

    详解配置 Apache 服务器支持 PHP 文件的解析 [说明] 1. 本例中 Apache 版本为 httpd-2.4.20-x64-vc14 ,安装路径为 E:\Apache24 2. PHP 版本为 php-5.5.34-Win32-VC11-x64 ,安装路径为 E:\php-5.5.34 [下载] 登录 http://php.NET/downloads.php 下载 PHP,由于我要把它跟 Apache 集成,所以我这里下载的是 Thread Safe 版本: [安装] 1. 解压下载

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

  • 详解Golang如何实现支持随机删除元素的堆

    详解Golang如何实现支持随机删除元素的堆

    目录 背景 原理 数据结构 随机访问 删除 map里面的元素index维护 Golang实现 数据结构 移除堆顶元素 添加元素 移除元素 push().pop()和swap() 时间复杂度 总结 背景 堆是一种非常常用的数据结构,它能够支持在O(1)的时间复杂度获取到最大值(或最小值),因此我们经常在需要求最值的场景使用它. 然而普通堆它有一个缺点,它没办法快速的定位一个元素,因此它也没办法快速删除一个堆中元素,需要遍历整个堆去查询目标元素,时间复杂度是O(n),因为堆的结构在逻辑上是这样的:

  • 详解vue-cli与webpack结合如何处理静态资源

    处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/assets和static/,他们两者的区别是什么呢? 打包的资源 为了回答这个问题,我们首先要明白Webpack是如何处理静态资源的.在*.vue组件里,所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL. 举个例子,在<img src"./logo.png">和背景background: url(.

  • 详解vue-cil和webpack中本地静态图片的路径问题解决方案

    详解vue-cil和webpack中本地静态图片的路径问题解决方案

    本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片 1 将图片当成模块先引进来,再绑定 但是这种做法局限性比较大,模块化差,代码不好看 . 如果我做的是纯静态的网站展示,有许多的本地静态资源需要加载

  • 详解让sublime text3支持Vue语法高亮显示的示例

    详解让sublime text3支持Vue语法高亮显示的示例

    让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用. 2.将vue-syntax-highlight植入sbulime. 进入sublime,选择菜单项"Preferences->Browse Packages...&quo

  • 详解用node搭建简单的静态资源管理器

    详解用node搭建简单的静态资源管理器

    本文介绍了用node搭建简单的静态资源管理器,分享给大家,具体如下: 我么都知道,老牌的3p服务器都是自带静态资源管理器的.但是node不同,它没有web容器,它的路由地址和真实地址可以没有联系,所有node的优点,是可以把路由做得相当漂亮. 但静态资源管理器也是必不可少的东西,今天我主要用node的fs模块,自己手写一个简单的静态资源管理器. 首先,建一个static文件夹,所有的静态文件都将放到这个文件夹下 引包 var http = require("http"); var ur

随机推荐