码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap中modal弹出框的使用

时间:2017-08-06 21:47:30      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:弹出框   str   content   horizon   target   dism   属性   dialog   default   

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弹出框的使用

标签:弹出框   str   content   horizon   target   dism   属性   dialog   default   

原文地址:http://www.cnblogs.com/dali-lyc/p/7295885.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!