基于bootstrap的Dialog
function yms_Dialog(container_id, modal_path, handle_function) {
/// <summary>
/// 方法介绍: 上海一门式Dialog(bootstrap框),框的地址为部分视图(注意框上弹框时,父框和子框id不能冲突)
/// </summary>
/// <param name="container_id">容器的ID</param>
/// <param name="modal_path">框的地址</param>
/// <param name="handle_function">框加载完成执形的一系列操作</param>
var div_container = "<div id='" + container_id + "'></div>";
$("body").append(div_container);
$("#" + container_id).load(modal_path, function () {
$("#" + container_id).find('#myModal').modal({
show: true,
backdrop: true
});
$("#" + container_id).find('#myModal').on('hide.bs.modal', function () {
// 执行一些动作...
$(this).remove();
$("#" + container_id).remove();
})
if (handle_function != undefined) {
handle_function();
}
});
}
if (typeof jQuery == 'undefined') {
alert("请先导入jQuery");
} else {
jQuery.extend({
yms_Dialog: yms_Dialog
});
}
使用
前台js
$.yms_Dialog("edit_dialog", "/DataEntering/EditView?id=" + id, function () {
$("#data_type_edit").val($("#data_type_edit").attr("gc"));
});
部分视图代码:
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade in" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button"> × </button> <h4 id="myModalLabel" class="modal-title"> <strong>添加灵感</strong> </h4> </div> <div class="modal-body"> <div class="form-group"> <label for="name">灵感描述</label> <textarea placeholder="请填写灵感描述" rows="3" class="form-control" id="txt_idea-dec"></textarea> </div> <div class="form-group"> <label for="name">发布人</label> <input type="text" placeholder="请填写发布人,不填则为匿名" class="form-control" id="txt_idea-publisher"> </div> </div> <div class="modal-footer"> <button data-dismiss="modal" class="btn btn-default" type="button"> 关闭 </button> <button class="btn btn-primary" type="button" id="Modal-Add"> 添加 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人