zoukankan      html  css  js  c++  java
  • 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=" 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>
  • 相关阅读:
    【Web技术】561- 网站性能优化之度量篇
    【拓展】什么是Deno?跟Node.js有何区别?
    【Web技术】560- 一个简洁、有趣的无限下拉方案
    【Web技术】559- 一文带你彻底搞懂跨域
    【TS】558- 5000 多字,让你一文掌握 TS 枚举
    【拓展】你真的会写 Markdown 么?
    【调试】557- 11 个Chrome骚技巧让你为所欲为
    ios 地图
    ios 7 20像素解决
    保存图片到相册
  • 原文地址:https://www.cnblogs.com/dali-lyc/p/7295885.html
Copyright © 2011-2022 走看看