用到bootstrap里面模态框加载json数据
投稿于 被查看 33090 次 评论:266
用到bootstrap里面模态框加载json数据
http://blog.csdn.net/hunannanhu/article/details/51727821 ====这是网页链接
Bootstrap模态窗口加载外部json文件数据
http://www.jb51.net/article/83084.htm ====API参考
html 代码
<!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" onclick="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>
javascript 代码
$(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":"男" }]
用户评论