2
有谁知道Bootstrap模式对话框插件允许您在上面放置单选按钮并收集选定的值?带单选按钮的自举输入对话框
有谁知道Bootstrap模式对话框插件允许您在上面放置单选按钮并收集选定的值?带单选按钮的自举输入对话框
你不需要任何特殊的事情来做到这一点。你的模态是你页面的一部分,因此任何你可以在页面上访问的东西,你也可以在模态中访问。
$('#myModal').modal('show');
$('input[type=radio]').click(function() {
alert($(this).val());
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
当模态被弹出,它有在它三个单选按钮。当您选择一个时,会触发一个警报,向您显示所选单选按钮的值。
这表明您可以将任何控件添加到任何页面,并访问其中的数据以执行您需要执行的任何操作。
另一个我使用的例子是,当点击保存更改按钮时,获取所选单选按钮的值并将该页面上的标签设置为该值。 http://www.bootply.com/N2maILYKIT – MattD 2015-01-09 22:50:32
这很好。我修改,以满足我们的需求,谢谢。 – MB34 2015-01-13 19:55:56