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中的元素操作（弹幕）；
时间： 2024-08-26 06:50:54