我使用 google map 的 jquery 位置选择器插件。现在,我将 map 打开到 Bootstrap 3.0 模式框中。这有效,但我需要:当单击“保存更改”按钮时,在结果输入框中显示经度和纬度。
JS:
$('#us2').locationpicker({
location: {
latitude: 46.15242437752303,
longitude: 2.7470703125
},
radius: 300,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
$(document).ready(function () {
$("#btnModal").click(function () {
//How Can I Copy myDiv here so that I can also view it in Modal
$("#myModal").modal('show');
$("#myDiv").appendTo(".modal-body");
});
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv").prependTo("body");
})
});
HTML:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">Location:
<input type="text" id="us2-address" style="width: 200px" />Radius:
<input type="text" id="us2-radius" />
<div id="us2" style="width: 500px; height: 400px;"></div>Lat.:
<input type="text" id="us2-lat" />Long.:
<input type="text" id="us2-lon" />
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
result lat: <input type="text" id="lat" />
result long: <input type="text" id="lon" />
当单击“保存更改”按钮时,我有输入/连接值表单模式框的长结果和纬度结果。如何创建这个?
最佳答案
给“保存更改”btn
一个id:
<a href="#" class="btn btn-primary" id="save-changes">Save changes</a>
向 btn
添加一个点击处理程序,将值传输到主页并关闭模式:
$("#save-changes").click(function() {
$("#lat").val($('#us2-lat').val());
$("#lon").val($('#us2-lon').val());
$('#myModal').modal('hide');
})
fork fiddle -> http://jsfiddle.net/Lzv7w/
关于javascript - bootstrap模态框打开jquery位置选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24675238/