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