jQuery使用load方法加载其他文档内容
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方法加载其他文档内容的更多相关文章
- 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点
使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...
- 打开地图文件和shape文件代码加载Mxd文档
代码加载Mxd文档 用代码添加Mxd文档,用到AxMapControl.LoadMxFile(sFilePath),我们只要将Mxd文档的路径传给这个方法即可 /// <summary> ...
- jquery中的load方法加载页面无法缓存问题
在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...
- Jquery的Ready方法加载为什么两次?
Ready方法会调用两次? 查看对应的页面是否存在<iframe src="#" --> 存在iframe加载这个页面的时候,页面就会加载两次. $(document) ...
- jQuery的$.getScript方法去加载javaScript文档解析
1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function ...
- C# 加载xml文档文件及加载xml字符串
//创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml ...
- iframe加载的文档高度
var clientHeight = $("#iframe").contents().find("body").height();
- pyqt5加载pdf文档失败
import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QFileDialog from PyPDF2 import Pdf ...
- 使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题
继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...
随机推荐
- 工作中使用的html5和css3 新特性
1.placeholder <input type="text" placeholder="请输入手机号码" class="phone" ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- [转]深入理解Java 8 Lambda(类库篇——Streams API,Collectors和并行)
以下内容转自: 作者:Lucida 微博:@peng_gong 豆瓣:@figure9 原文链接:http://zh.lucida.me/blog/java-8-lambdas-insideout-l ...
- CodeForces #367 div2 D Trie
题目链接:Vasiliy's Multiset 题意:这里有一个set容器,有三种操作,+ num, - num, ? num,分别代表往容器里加上num,或者拿走num,或着从容器里找一个数temp ...
- Foundation框架—集合
Foundation框架—集合 一.NSArray和NSMutableArray (一)NSArray不可变数组 (1)NSArray的基本介绍 NSArray是OC中使用的数组,是面向对象的,以面向 ...
- iOS开发UI篇—无限轮播(循环利用)
iOS开发UI篇—无限轮播(循环利用) 一.无限轮播 1.简单说明 在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在开发的时候,我们通常的做法是使用一个UIScrollV ...
- 做办公用品、文具方面的 B2C 是否有前景呢?
企乐买现在正在做这方面的事,从市场角度来说需求是有的,客单价和重复购买率都还可以,但是也存在几个致命问题使得施展不开举步维艰: 1.中国特有的市场环境:在美国企业办公用品一般都是网上采购,避免灰色的东 ...
- PHP 缓存扩展opcache
opcache (全程 zend opcache): 从php5.5开始,默认提供的php脚本缓存扩展,编译php5.5时加上参数--enable-opcache就可以编译opcache了,只是要启用 ...
- OC基础--简介
OC简介: 1986年,BradCox(布莱德·考克斯)在第一个纯面向对象语言Smalltalk基础上写成了Objective-C语言. 1985年,被赶出苹果公司的Steve Jobs成立了NeXT ...
- 单例模式(Singleton Pattern)
动机: 在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例,才能确保它们的逻辑正确性.以及良好的效率. 如何绕过常规的构造器,提供一种机制来保证一个类只有一个实例? 这应该是类设 ...