Question

如何用jquery更改bootstrap弹出框的内容

Answer 1

使用jquery更改bootstrap弹出框的内容，可以使用Jquery的load()方法，动态加载不同的模态框（弹出框）内容，然后填充到页面的弹出框div中：

主页面只保留弹出框最外面的那个div

<div class="modal fade" id="myModal"> </div>

动态加载的弹出框内容页面中包括bootstrap模态框中的head、body和footer部分

<div class="modal-header">   
	<h3>模态框header </h3>  
</div>   
<div class="modal-body">   
	<p>模态框body</p>  
</div>   
<div class="modal-footer">   
	<p>模态框footer</p>   
</div>

利用jquery的load()方法，在点击不同的按钮时动态先动态加载内容到模态框的div中，然后再让bootstrap显示

<script>  
// 模态对话框隐藏时移除数据  
$("#myModal").on("hidden", function() {    
		$(this).removeData("modal");  
});   
// 显示模态对话框  
var showModal = function() {   
	var remote = "/test/showModal";  
	if (remote != "") {    
		$("#myModal").load(remote, function() {    
			$("#myModal").modal('show');   
		});  
}};  
</script>

其中showModal函数可以由按钮控制。