<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <link href="~/Content/bootstrap.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

    <title>Index</title>

</head>

<body>

    <input type="button" name="name" value="新增" id="btn_add" />

    <input type="button" name="name" value="编辑" id="btn_edit" />

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

            <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                        <h4 class="modal-title" id="myModalLabel">新增</h4>

                    </div>

                    <div class="modal-body">

                        <div class="form-group">

                            <label for="txt_departmentname">年龄</label>

                            <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="年龄">

                        </div>

                        <div class="form-group">

                            <label for="txt_parentdepartment">姓名</label>

                            <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="姓名">

                        </div>

                        <div class="form-group">

                            <label for="txt_departmentlevel">性别</label>

                            <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="性别">

                        </div>

                        <div class="form-group">

                            <label for="txt_statu">自我描述</label>

                            <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="一句话描述">

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>

                        <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>

                    </div>

                </div>

            </div>

        </div>

        <script>

            //注册新增按钮的事件

            $("#btn_add").click(function () {

                $("#myModalLabel").text("新增");

                $('#myModal').modal();

            });

            //注册编辑按钮的事件

            $("#btn_edit").click(function () {

                $("#myModalLabel").text("编辑");

                $('#myModal').modal();

            });

        </script>

</body>

</html>

效果图:

案例二:

 <button class="btn btn-warning" data-toggle="modal" id="btn_addjcxxwh"><i class="glyphicon glyphicon-plus"></i> 添加</button>

<div class="modal fade" id="jcxxwhModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <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="jcxxModalLabel">

                    新增

                </h4>

            </div>

            <form class="form-horizontal" role="form">

                <div class="modal-body">

                    <div class="form-group">

                        <label for="item_name" class="col-sm-3 control-label">项目名称</label>

                        <div class="col-sm-9">

                            <input type="text" class="form-control" required="required" id="item_name" name="item_name" value=""

                                   placeholder="请输入项目名称">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="standard_value" class="col-sm-3 control-label">标准值</label>

                        <div class="col-sm-9">

                            <input type="text" class="form-control" required="required" name="standard_value" value="" id="standard_value"

                                   placeholder="标准值">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="price" class="col-sm-3 control-label">价格</label>

                        <div class="col-sm-9">

                            <input type="text" required="required" class="form-control" name="price" value="" id="price"

                                   placeholder="价格">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="remark" class="col-sm-3 control-label">备注</label>

                        <div class="col-sm-9">

                            <textarea class="form-control" name="remark" value="" id="remark"

                                      placeholder="备注"></textarea>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <div class="row">

                        <div class="form-group">

                            <div class="col-sm-4 col-sm-offset-4">

                                <button class="btn btn-primary " type="submit" id="btn_jcxxwhSava"><i class="fa fa-check"></i>&nbsp;保存</button>&nbsp;&nbsp;

                                <button class="btn btn-warning" data-dismiss="modal" id="btn_close" type="button"><i class="glyphicon glyphicon-remove"></i>&nbsp;关闭</button>

                            </div>

                        </div>

                    </div>

                </div>

            </form>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

效果图:

bootstrap 弹框的更多相关文章

  1. bootstrap弹框

    http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...

  2. bootstrap 弹框使用

    首先需要准备bootstrap.css,bootstrap .js  jquery 我这里有写好的下载地址如下: https://pan.baidu.com/s/1miMahXe  秘钥:tgts & ...

  3. bootstrap弹框去除遮罩层效果

    是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=)!important; opacity: !important; } ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  6. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  7. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  8. Bootstrap 模态框(也可以说的弹出层)

    最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...

  9. bootstrap弹出框

    要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...

随机推荐

  1. GeoGlobe Server使用问题收集

    本人在做数字县区过程中,需要吉奥GeoGlobe Server发布数据,期间遇到些平台问题.故立此帖,作为参考. 1 字段限制: GeoGlobe 5.2部署在我的服务器Windows Server ...

  2. Handy Collaborator ：用于挖掘out-of-band类漏洞的Burp插件介绍

    本文我将介绍一个新的 Burp Suite插件Handy Collaborator.Burp Suite Collaborator是添加到Burp Suite的外部服务器,主要用于挖掘那些仅来自外部服 ...

  3. BN_batch normalization

    参考: https://zhuanlan.zhihu.com/p/27938792 做法 设,每个batch输入是 (其中每个 都是一个样本, 是batch size) 假如在第一层后加入Batch ...

  4. css控制继承

    inherit:继承父类. initial:继承浏览器. unset:重置为自然值,继承父类或者浏览器. revert:恢复原来的值. 详解: CSS为处理继承提供了四种特殊的通用属性值: inher ...

  5. Kaldi语料的两种切分/组织方式及其处理

    text中每一个文本段由一个音频索引(indexed by utterance) 使用该方式的egs:librispeech.timit.thchs30.atc_en.atc_cn 语料的组织形式为: ...

  6. python的进程/线程/协程

    1.python的多线程 多线程就是在同一时刻执行多个不同的程序,然而python中的多线程并不能真正的实现并行,这是由于cpython解释器中的GIL(全局解释器锁)捣的鬼,这把锁保证了同一时刻只有 ...

  7. Vue.js 技术揭秘（学习） slot

    slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽

  8. Flask网页模板的入门

    #网页模板需要导入render_template from flask import Flask,render_template   方法一: #使用render_template模块来渲染模板文件 ...

  9. Maven项目在更新过程停止，再更新无效-->解决

    ---类似网友问题:但我按照这样无法解决. eclipse中maven项目jar包不会自动下载解决办法 - wavemelody - 博客园http://www.cnblogs.com/mymelod ...

  10. 搜索jar包 出现很多 Artifact Id相同 但Group Id不同 的包

    举例:将传统本地 javassit-3.17.1-GA.jar包 改成maven引用,pom中 ---Add 输入javassit 搜索 这时候会搜索出超级多 Artifact Id相同 但Group ...