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. start with connect by prior 递归查询用法

    这个子句主要是用于B树结构类型的数据递归查询,给出B树结构类型中的任意一个结点,遍历其最终父结点或者子结点. 先看原始数据: create table a_test ( parentid ), sub ...

  2. spring mvc 注解 学习笔记（一）

    以前接触过spring,但是没有接触spring mvc 以及注解的应用,特习之,记之: 注解了解 @Component 是通用标注, @Controller 标注web控制器, @Service 标 ...

  3. 了解Sql Server的执行计划

    前一篇总结了Sql Server Profiler,它主要用来监控数据库,并跟踪生成的sql语句.但是只拿到生成的sql语句没有什么用,我们可以利用这些sql语句,然后结合执行计划来分析sql语句的性 ...

  4. 如何在CentOS 7上安装Percona服务器

    在这篇文章中我们将了解关于 Percona 服务器,一个开源的MySQL,MariaDB的替代品.InnoDB的数据库引擎使得Percona 服务器非常有吸引力,如果你需要的高性能,高可靠性和高性价比 ...

  5. 横竖屏切换时候Activity的生命周期的总结

    1.新建一个Activity,并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate--> onStart--> onResume--> 3.按crtl+ ...

  6. 关于 php mysql pdo cannot find driver 解决方案

    1.下载 文件 或者 进入 在PHP源码包中进入ext/pdo_mysql http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 2.解压文件tar zxvf PDO ...

  7. 计算机网络(5)-----ICMP协议和PING程序

    控制报文协议(Internet Control Message Protocol) 定义 它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制消息.控制消息是指网络通不通.主机是否可 ...

  8. easyui 之ComboTree 用法Demo

    实现效果如下: HTML部分: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

  9. 微信JS-SDK DEMO页面和示例代码

    <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourApp ...

  10. SendInput模拟Win(VK_LWIN)键的问题

    使用SendInput模拟按键,代码如下: #include "stdafx.h" #include <windows.h> #include <conio.h& ...