bootstrap 带有确定取消按钮的modal
2015-12-26 10:25
513 查看
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="helpInfo" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="helpInfo">提示信息</h4>
</div>
<div class="modal-body">
<div id="confirmModal-content" class="text-danger">
</div>
</div>
<div class="modal-footer">
<button id="confirm" type="button" class="btn btn-primary " data-dismiss="modal">确定</button>
<button id="cancel" type="button" class="btn btn-primary " data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
$("#checkBtn").click(function () {
var grid = $('#ChecksGrid').data('kendoGrid');
var row = grid.select();
if (row.length == 1) {
var data = grid.dataItem(row);
$("#confirmModal-content").html("确定审核通过?");
$("#confirmModal").modal({ backdrop: 'static', keyboard: false })
.one('click', '#confirm', function (e) {
var url = "@Url.Action("OfficeCheck", "MissionCheckFileCheck", new { id = "__id__", fileLocation = "__fileLocation__" })";
window.location = url.replace("__id__", data.Id).replace("__fileLocation__", data.FileLocation).replace(/amp;/g, "");
});
} else {
$("#modal-content").html("请选择未审的文书");
$("#noRowSelectModal").modal();
}
});
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="helpInfo">提示信息</h4>
</div>
<div class="modal-body">
<div id="confirmModal-content" class="text-danger">
</div>
</div>
<div class="modal-footer">
<button id="confirm" type="button" class="btn btn-primary " data-dismiss="modal">确定</button>
<button id="cancel" type="button" class="btn btn-primary " data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
$("#checkBtn").click(function () {
var grid = $('#ChecksGrid').data('kendoGrid');
var row = grid.select();
if (row.length == 1) {
var data = grid.dataItem(row);
$("#confirmModal-content").html("确定审核通过?");
$("#confirmModal").modal({ backdrop: 'static', keyboard: false })
.one('click', '#confirm', function (e) {
var url = "@Url.Action("OfficeCheck", "MissionCheckFileCheck", new { id = "__id__", fileLocation = "__fileLocation__" })";
window.location = url.replace("__id__", data.Id).replace("__fileLocation__", data.FileLocation).replace(/amp;/g, "");
});
} else {
$("#modal-content").html("请选择未审的文书");
$("#noRowSelectModal").modal();
}
});
相关文章推荐
- UI-Bootstrap 模态对话框示例
- bootstrap-switch(开关插件)
- bootstrap的使用
- bootstrap-fileinput图片上传
- Bootstrap(4)之表格和表单
- bootstrap ace admin 整合java HTML5 全新高大尚后台框架
- bootstrap-glyphicons图标
- Bootstrap之3 栅格系统
- ServerBootStrap启动流程源码分析
- Bootstrap Manifest Generator(BMG) 生成的product.xml 试分析
- Bootstrap Manifest Generator(BMG) 生成的product.xml 试分析
- Bootstrap wysiwyg,将富文本数据保存到mysql
- 为bootstrap设计的漂亮图标
- Bootstrap记录点滴
- Bootstrap wysiwyg,将富文本数据保存到mysql
- 沈大海Bootstrap系列教程
- BootStrap学习之下拉列表
- 文章标题
- BootStrap插件使用之模态框
- Bootstrap之表格