Bootstrap模态窗口加载外部json文件数据

最新推荐文章于 2019-07-22 10:57:25 发布

飞向Hadoop

最新推荐文章于 2019-07-22 10:57:25 发布

阅读量4k

点赞数

分类专栏： javascript开发

本文链接：https://blog.csdn.net/hunannanhu/article/details/51727821

版权

javascript开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<style>
			li {
				list-style: none;
			}
			.modal-backdrop {
				display: none;
			}
		</style>
	</head>
	<body>
			<!--模态窗口 -->
			<a  class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="myModal">
			  点击出现模态窗口
			</a>
			<!--窗口内容-->
			<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  	<div class="modal-dialog" role="document">
				    <div class="modal-content">
				      	<div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					        	<span aria-hidden="true">×</span>
					        </button>
					        <h4 class="modal-title" id="myModalLabel">模态窗口</h4>
				      	</div>
					    <div class="modal-body modal-li">
					      	<form>
					      	  	<ul>
					      	  		<li>
					      	  			<label for="name">姓名</label>
		      							<input type="text" class="form-control text-input" id="name" placeholder="请输入姓名">
					      	  		</li>
					      	  		<li>
					      	  			<label for="name">编号</label>
		      							<input type="text" class="form-control text-input" id="number" placeholder="请输入编号">
					      	  		</li>
					      	  		<li>
					      	  			<label for="name">性别</label>
		      							<input type="radio" name="sex" id="man" value="男" style="margin-left:10px;"/>男  
                      					<input type="radio" name="sex" id="women" value="女" style="margin-left:10px;"/>女 
					      	  		</li>
					      	  	</ul>
					      	</form>
					    </div>
					    <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					        <button type="button" class="btn btn-primary"  οnclick="modalsave()">保存</button>
					    </div>
				    </div>
			  	</div>
			</div>
			<!--end-模态窗口 -->
		<script src='js/jquery-1.10.2.min.js'></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

js:

$(function(){
     	 $("#myModal").click(function(){
	        //使用getJSON方法读取json数据,xxx.json可以是不同类型文件，只要其中的数据为json类型即可
	        $.getJSON('json/data1.json',function(data){
	            var html = '';
	            $.each(data,function(i,item){
		            var name = item['name'];
		            var number = item['number'];
		            var sex = item['sex'];
				       
				    $('#name').val(name);
					$('#number').val(number);
				    if (sex == '女') {  
				        document.getElementById('women').checked = true;  
				    } else {  
				        document.getElementById('man').checked = true;  
				    }         
	            });
	        });
	        
	        $('#modal').modal('show');  
    	});
    	
    	function modalsave(){
    		$('#modal').modal('hide');  
    	}

  	});

json文件：

[{
	"name":"张三",
	"number":"12344",
	"sex":"男"
}]

飞向Hadoop

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap模态窗口加载外部json文件数据

页面： li { list-style: none; } .modal-backdrop { display: none; } 点击出现模态窗口
复制链接

扫一扫

专栏目录

Bootstrap模态窗口加载外部json文件数据

“相关推荐”对你有帮助么？