<!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. adduser Ubuntu添加sudo用户

    第一种方法: 添加sudo用户 当你安装Ubuntu的时候,它会自动添加第一个用户到sudo组,允许这个用户通过键入其自身帐户密码来获得超级用户(root)身份.然而,系统不会再自动添加其他的用户到s ...

  2. 一个不错的Html5 DatePicker控件,主要支持手机端。

    原地址不知道在哪了,下载地址 QQ群:616945527 Html5控件wen文件夹中DatePicker.rar

  3. 第26月第22天 iOS瘦身之armv7 armv7s arm64选用 iOS crash

    1.iOS瘦身之armv7 armv7s arm64选用 机器对指令集的支持是向下兼容的,因此armv7的指令集是可以运行在iphone5S以上的,只是效率没那么高而已~ 但是由于苹果要求必须支持ar ...

  4. java基础 包装类

    包装类在集合中用来定义集合元素的类型. 1.Integer.MIN_VALUE:int类型的最小值:-2^31 2.Integer.MAX_VALUE:int类型的最大值:2^31-1 3.int  ...

  5. Jmeter Md5加密操作之-------BeanShell PreProcessor

    背景: 有一些登录会做一些md5校验,通过jmeter的BeanShell可以解决MD5加密情况. 1.首先需要一个解码的jar包,commons-codec-1.10.jar(网上很多),下载后,放 ...

  6. Django学习手册 - 基于requests API验证(一)

    验证需要知道requests提交数据的几种方式: GET 方式: # get 方式,传递数值可以直接通过url传递:(服务端接受 GET) requests.get(url='http://127.0 ...

  7. 存在Settings数据在手机系统中的位置

    旧版本Android,将settings数据存在数据库中,{system, secure, global} 对应的是 /data/data/com.android.providers.settings ...

  8. ASP.NET - 学习总目录

    ASP.NET - 处理页面 ASP.NET - ADO.NET框架 ASP.NET - 创建功能菜单 ASP.NET MVC - 入门 ASP.NET MVC - 模型验证 ASP.NET MVC ...

  9. BootstrapValidator 解决多属性被同时校验问题

    问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果.如图: 问题分析:因 ...

  10. 贝叶斯优化(Bayesian Optimization)深入理解

    目前在研究Automated Machine Learning,其中有一个子领域是实现网络超参数自动化搜索,而常见的搜索方法有Grid Search.Random Search以及贝叶斯优化搜索.前两 ...