modal按鈕位置安放：

<button class="btn btn-primary" onclick="edit()" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-edit"></i> 編輯 </button>

?modal框內容設置（表單提交）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" style="width: 60%"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">系統配置</h4></div><div class="modal-body"><div class="row"><form id="form" class="form-horizontal col-lg-offset-1 col-lg-10" roe="form"><div class="form-group"><label class="control-label col-md-3">屬性1：</label><div class="col-md-9"><input class="form-control" type="text"required="required"/></div></div><div class="form-group"><label class="control-label col-md-3">屬性2：</label><div class="col-md-9"><input class="form-control" type="text"required="required"/></div/></div><div class="form-group"><label class="control-label col-md-3">是否激活：</label><div class="col-md-9"><input type="radio" name="isValid" id="radioyes" value="1" checked style="margin-top:2%"/>是<input type="radio" name="isValid" id="radiono" value="0"/>否</div></div></form></div></div><div class="modal-footer" style="text-align: center"><button type="button" class="btn btn-default" data-dismiss="modal">關閉</button><button type="button" id="editbtn" class="btn btn-primary">提交</button></div></div></div> </div>

?

轉載于:https://www.cnblogs.com/dali-lyc/p/7295885.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的bootstrap中modal弹出框的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。