A文档载入B文档的内容，并且通过JQ操作被引入到A文档中的元素

A文档 （index.html）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

     <link href="css/bootstrap.css" rel="stylesheet">

</head>

<body>

<div id="textDiv">

</div>

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/bootstrap.js"></script>

<script>

    $('#textDiv').load('modal.html',function(){

        $('#modalBox').modal('show');

    });

</script>

</body>

</html>

B文档（modal.html）：

<div class="modal fade" id="modalBox" role="dialog" aria-labelledby="conTitle">

    <div class="modal-dialog" role="document" >

        <div class="modal-content">

            <div class="modal-header" style="background-color: #fff;border-top-left-radius: 15px;border-top-right-radius: 15px;">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                <h4 class="modal-title" id="conTitle">Modal title</h4>

            </div>

            <div class="modal-body" style="background-color:forestgreen;">

                <p>One fine body…</p>

            </div>

            <div class="modal-footer" style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary">Save changes</button>

            </div>

        </div>

    </div>

</div>

1、index.html引入jQuery文件,由于我有用到bootstrap，因此我引入了boostrap.css和bootstrap.js文件，要注意这些文件在文档中的位置和顺序；js文件一般放到最后在引入，由于bootstrap.js依赖jquery.文件，因此jquery.js要再比bootstrap.js先引入；

2、jq代码：

 $('#textDiv').load('modal.html',function(){

        $('#modalBox').modal('show');

    });

--1、 使用load的方法将modal.html加载到index.html中id为textDiv的div中；

--2、在使用函数对modal.html中的元素操作（弹幕）；

jQuery使用load方法加载其他文档内容的更多相关文章

  1. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  2. 打开地图文件和shape文件代码加载Mxd文档

    代码加载Mxd文档 用代码添加Mxd文档,用到AxMapControl.LoadMxFile(sFilePath),我们只要将Mxd文档的路径传给这个方法即可 /// <summary>  ...

  3. jquery中的load方法加载页面无法缓存问题

    在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...

  4. Jquery的Ready方法加载为什么两次？

    Ready方法会调用两次? 查看对应的页面是否存在<iframe src="#" --> 存在iframe加载这个页面的时候,页面就会加载两次. $(document) ...

  5. jQuery的$.getScript方法去加载javaScript文档解析

    1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function ...

  6. C# 加载xml文档文件及加载xml字符串

    //创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml ...

  7. iframe加载的文档高度

    var clientHeight = $("#iframe").contents().find("body").height();

  8. pyqt5加载pdf文档失败

    import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QFileDialog from PyPDF2 import Pdf ...

  9. 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题

    继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...

随机推荐

  1. RHCE 系列（二）：如何进行包过滤、网络地址转换和设置内核运行时参数

    正如第一部分(“设置静态网络路由”)提到的,在这篇文章(RHCE 系列第二部分),我们首先介绍红帽企业版 Linux 7(RHEL)中包过滤和网络地址转换(NAT)的原理,然后再介绍在某些条件发生变化 ...

  2. Winform开发框架之系统登录实现

    在业务系统的操作过程中,有时候,用户需要切换用户进行重新登录,这种情况有时候是因为一个人管理多个用户账号,希望通过不同的账号登录进行管理不同的资料,另一种情况是酒店的换班操作,另一个人接替前面的人进行 ...

  3. [vijos P1180] 选课

    这一周竟然都没好好码题目,不过至少把这题的树形DP给摸了个大概.吐槽一下自己,递归已经基本不会用了…QAQ!按老师的话来说“太危险了!” 此题用到多叉树转二叉树,左孩子是真正意义的孩子(先修完自己才能 ...

  4. const 放在函数后

    const 放在函数后表示这个函数是常成员函数, 常成员函数是不能改变成员变量值的函数.const 限定符,它把一个对象转换成一个常量.举例:为了使成员函数的意义更加清楚,我们可在不改变对象的成员函数 ...

  5. DDOS的攻击原理和防护指南（转）

    DDOS的攻击原理和防护指南 作者:冰盾防火墙 网站:www.bingdun.com 日期:2008-01-07   我们现在来分析DDOS的攻击原理.     首先,DDOS是英文Distribut ...

  6. POI XSSF与HSSF的 使用区别

    首次写博客,希望能坚持下去,一点一滴的积累,内容不多也不深,但愿我的分享,能帮助和我一样的新人们解决问题 最近给项目中添加了一个导入excel表格的功能,然而在功能开发结束后测试,发现报错. 报错信息 ...

  7. 《Java中的单例模式--两种》

    //单例模式:饿汉式和懒汉式 //单例模式 /* 设计模式:解决某一类问题行之有效的解决办法(思想). 单例(Singleton):设计模式: 学习设计模式必须先弄清楚它是解决什么问题的. 单例模式是 ...

  8. 安装生物信息学软件-R

    主要参考http://www.3fwork.com/b211/000091MYM021616/ Step 1 : sudo gedit /etc/apt/sources.list 添加到末尾 deb ...

  9. iOS应用数据存储2-SQLite3数据库

          SQLite3 SQLite3是一款开源的嵌入式关系型数据库,可移植性好,易使用,内存开销小. SQLite3是无类型的,意味着你可以保存任何类型的数据到任意表的任意字段中. SQLite ...

  10. 2016 - 1 - 23 json解析

    一: json   1. 什么是json 1.1 json是一种轻量级的数据格式,一般用于数据交互. 1.2 服务器返回给客户端的数据,一般都是JSON或者XML格式(文件下载除外).   2. JS ...