2016 系统设计第一期 (档案一)MVC bootstrap model弹出窗
2023-09-11 14:19:36 时间
局部代码:
<!-- 按钮触发模态框 --> <div style=""> <button class="btn btn-primary" data-toggle="modal" data-target="#SaveUser_Modal"> 添加用户 </button> <button class="btn btn-primary" data-toggle="modal" data-target="#EditUser_Modal" onclick="GetPop();"> 修改用户 </button> </div>
窗体代码:
<!-- 模态框(Modal)添加用户页面 开始 --> <div class="modal fade" id="SaveUser_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="width:80%"> @*设定窗体宽度,只有在这个 class="modal-dialog" 这个div有效*@ <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> @using (Html.BeginForm("Create", "Users", FormMethod.Post, new { id = "SaveUserForm", @class = "form-horizontal" })) { <div class="modal-body"> <div class="form-group"> <label for="LoginName" class="col-sm-2 control-label">账号</label> <div class="col-md-8"> @Html.TextBox("LoginName", "", new { @class = "form-control", placeholder = "请输入账号" }) </div> </div> <div class="form-group"> <label for="LoginPwd" class="col-sm-2 control-label">密码</label> <div class="col-md-8"> @Html.TextBox("LoginPwd", "", new { @class = "form-control", placeholder = "请输入密码" }) </div> </div> <div class="form-group"> <label for="confirmLoginPwd" class="col-sm-2 control-label">确认密码</label> <div class="col-md-8"> @Html.TextBox("confirmLoginPwd", "", new { @class = "form-control", placeholder = "请输入密码" }) </div> </div> <div class="form-group"> <label for="FullName_C" class="col-sm-2 control-label">中文名</label> <div class="col-md-8"> @Html.TextBox("FullName_C", "", new { @class = "form-control", placeholder = "请输入中文名" }) </div> </div> <div class="form-group"> <label for="FullName_E" class="col-sm-2 control-label">英文名</label> <div class="col-md-8"> @Html.TextBox("FullName_E", "", new { @class = "form-control", placeholder = "请输入英文名" }) </div> </div> <div class="form-group"> <label for="CreateTime" class="col-sm-2 control-label">创建时间</label> <div class="col-md-8"> <div class="input-group date form_date" data-date="" data-date-format="" data-link-field="CreateTime" data-link-format="yyyy-mm-dd"> <input class="form-control" size="10" type="text" value="" readonly> @*<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>*@ <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> @Html.Hidden("CreateTime") </div> </div> <div class="form-group"> <label for="Email" class="col-sm-2 control-label">邮箱</label> <div class="col-md-8"> @Html.TextBox("Email", "", new { @class = "form-control", placeholder = "请输入邮箱" }) </div> </div> <div class="form-group"> <label for="QQ" class="col-sm-2 control-label">QQ</label> <div class="col-md-8"> @Html.TextBox("QQ", "", new { @class = "form-control", placeholder = "请输入QQ" }) </div> </div> <div class="form-group"> <label for="Gender" class="col-sm-2 control-label">性别</label> <div class="col-md-8"> <label class="checkbox-inline"> @Html.RadioButton("Gender", 1, new { @id = "radio1", @name = "Gender" })男 </label> <label class="checkbox-inline"> @Html.RadioButton("Gender", 0, new { @id = "radio0", @name = "Gender" })女 </label> </div> </div> <div class="form-group"> <label for="Mobile" class="col-sm-2 control-label">手机</label> <div class="col-md-8"> @Html.TextBox("Mobile", "", new { @class = "form-control", placeholder = "请输入手机" }) </div> </div> <div class="form-group"> <label for="Telephone" class="col-sm-2 control-label">联系电话</label> <div class="col-md-8"> @Html.TextBox("Telephone", "", new { @class = "form-control", placeholder = "请输入联系电话" }) </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="captchaOperation"></label> <div class="col-md-8"> <input type="text" class="form-control" name="captcha" placeholder="请输入请输入结果" /> </div> </div> <input type="hidden" id="UserId" value="" /> @Html.Hidden("CreateTime") </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> <button type="button" class="btn btn-info" id="validateBtn">重新验证</button> <button type="button" class="btn btn-info" id="resetBtn">重置</button> <button type="submit" class="btn btn-primary"> 提交更改 </button> </div> } </div><!-- /.modal-content --> </div> </div> <!-- 模态框(Modal)添加用户页面 结束 -->
相关用法:
设定宽度: <div class="modal-dialog" style="width:80%">
显示:$('#myModal').modal('show');
隐藏:$('#myModal').modal('hide');
开关:$('#myModal').modal('toogle');
事件: $('#myModal').on('hidden', function () {// do something…});
相关链接:http://www.cnblogs.com/firstcsharp/p/4183181.html
相关文章
- <转载>Bootstrap 入门教程 http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 系列
- JS框架_(Bootstrap.js)实现简单的轮播图
- bootstrap时间格式化
- bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片
- bootstrap组件
- 修复bootstrap daterangepicker中的3个问题
- 第二百五十一节,Bootstrap项目实战--响应式轮播图
- 第二百四十五节,Bootstrap标签页和工具提示插件
- 第二百三十六节,Bootstrap辅组类和响应式工具
- [Bootstrap] 8. 'Collapse', data-target, data-toggle & data-parent
- Bootstrap表格动态加载内容和排序功能
- [Bootstrap] 5. Button and well
- Bootstrap-table 使用说明--如何在表格td里增加一个按钮
- Angular应用bootstrap时的version检测机制
- atitit。html css框架Bootstrap Foundation的比较与不同 attilax大总结
- BootStrap的布局容器和栅格系统
- 【Bootstrap】bootstrap入门之Scss知识点详解_03
- Bootstrap中的utilities(工具类)