首页 > 代码库 > bootstrap中modal弹出框的使用
bootstrap中modal弹出框的使用
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">×</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弹出框的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。