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

来源：互联网发布：rank网络舆情监测系统编辑：程序博客网时间：2024/06/05 19:59

页面：

<!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>

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":"男"}]

0 0