欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

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

用户评论