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. ASCII十进制字符集

    <script> for(var i=33;i<=6000;i++){ document.write("&nbsp"+i+"&nbsp ...

  2. Objective－C（ block的使用）

    block block用来保存一段代码 block的标志:^ block跟函数很像:可以保存代码.有返回值.有形参.调用方式跟调用方法一样 block内部可以访问外面的变量 默认情况下,block内部 ...

  3. 贪心算法 hdu 1009

    1.因为要排序只派j[i]/f[i],不能知道f[i]和j[i]各自排序后的顺序,因此要用到结构体 2.用sort(ware,ware+n,cmp) cmp 为俩个数组的元素比较大小的布尔值 #inc ...

  4. Windows Store App 控件动画

    在开发Windows应用商店应用时,开发工具中已经封装了大量的控件供开发人员使用,而其中有一部分控件,例如FlipView.ToolTip.ListView以及SemanticZoom等控件中已经默认 ...

  5. Java Java Java

    学下java 的大数该怎么用>< hdu 1023 Train Problem II 求 卡特兰 数 诶...不记得卡特兰数的我眼泪掉下来 第一次用 java 大数 有点激动...> ...

  6. 一个null引发的错误

    写程序时,发生一个unrecognized selector的错误,很显然,这是一个经典错误,运行时找不到可调用的方法. 系统提示的reason是 -[NSNull length] 错误 经过查找,原 ...

  7. poj3268 最短路

    //Accepted 1124 KB 0 ms #include <cstdio> #include <cstring> #include <iostream> # ...

  8. Ubuntu中添加eclipse

    环境:Ubuntu 14.04 步骤: 1.安装配置JDK,详见 http://my.oschina.net/u/1407116/blog/227084 2.下载eclipse 从官网http://w ...

  9. HTML5实战——svg学习

    百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...

  10. [读书笔记] java类初始化

    以下内容来自周志明的<深入理解java虚拟机>: 类初始化阶段是类加载过程的最后一步,前面的类加载过程中,除了在加载阶段用户应用程序可以通过自定义类加载器参与之外,其余动作完全由虚拟机主导 ...