1. 程式人生 > >bootstrap中modal彈出框的使用

bootstrap中modal彈出框的使用

tabindex belle 表單提交 boot clas abi font 配置 header

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>

bootstrap中modal彈出框的使用