Bootstrapモードウィンドウ外部jsonファイルデータのロード
4339 ワード
ページ:
<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>
<!-- -->
<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"> </button>
</div>
</div>
</div>
</div>
<!--end- -->
<script src="js/jquery-1.10.2.min.js"/>
<script src="js/bootstrap.min.js"/>
</code></pre>
<br/>
<span style="font-size:14px;">js:</span>
<p><span style="font-size:14px;"/></p>
<pre><code>$(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');
}
});</code></pre>json ：
<p><span style="font-size:14px;"/></p>
<pre><code>[{
"name":" ",
"number":"12344",
"sex":" "
}]</code></pre>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>