局部代码:
<!-- 按钮触发模态框 --> <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