twitter-bootstrap – 带单选按钮的Bootstrap输入对话框
发布时间:2020-12-17 21:30:26 所属栏目:安全 来源:网络整理
导读:有没有人知道一个Bootstrap模式对话框插件,它允许你放置单选按钮并收集所选的值? 解决方法 你不需要任何特殊的东西来做这件事.您的模态是页面的一部分,因此您可以在页面上访问的任何内容也可以在模式内访问. $('#myModal').modal('show');$('input[type=rad
有没有人知道一个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> 弹出模态时,它中有三个单选按钮.当您选择一个时,会触发一个警报,显示所选单选按钮的值. 这表明您可以向任何页面添加任何控件,并访问其中的数据以执行您需要执行的操作. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |