Bookstrop 模态框
Bootstrap 模态框是一个轻量级的多用途JavaScript弹出窗口，可自定义和响应式。可以使用它在网站中显示警告窗口、视频和图片。 模态框是覆盖在父窗体上的子窗体。目的是用来显示来自一个单独源的内容，可以在不离开父窗体的情况下有一些互动。
Bookstrop 模态框的事件
-
show.bs.modal：在模态框打开之前被触发。
-
shown.bs.modal：在显示模态框后触发。
-
hide.bs.modal：在模态框被隐藏之前触发。
-
hidden.bs.modal：在模态关闭后触发。
Bookstrop 模态框的用法实例
静态模态框实例
$("#modal-id").on("click", ".btn-primary", function () {
$(this).closest(".modal-content").find("form").submit();
$.ajax({
url: "http://localhost:5000/content",
type: "POST",
data: { title, content, top },
success: function (res) {
if (res.status === 200) {
console.log("添加成功");
$("#modal-id").modal("hide");
load();
} else {
alert(res.msg);
}
}
})
})
模态框 添加
后台代码段
// 查询单个 动态路由
router.get("/content/:id",async ctx =>{
try{
const data=await contentModel.findOne({_id:ctx.params.id});
return success(ctx,data);
}catch(error){
return fail(ctx,error)
}
})
引入 js 文件
<script src="./js/jquery.validate.min.js"></script>
html代码段
$("#modal-id form").validate({
submitHandler: function () {
var id = $("#_id").val();
var title = $("#title").val();
var content = $("#content").val();
var top = $("#top").prop("checked");
if (id) {
$.ajax({
url: `http://localhost:5000/content/${id}`,
type: "PUT",
data: { title, content, top },
success: function (res) {
if (res.status === 200) {
console.log("添加成功");
$("#modal-id").modal("hide");
load();
} else {
alert(res.msg);
}
}
})
} else {
$.ajax({
url: "http://localhost:5000/content",
type: "POST",
data: { title, content, top },
success: function (res) {
if (res.status === 200) {
console.log("添加成功");
$("#modal-id").modal("hide");
load();
} else {
alert(res.msg);
}
}
})
}
$("#_id").val("")
$("#title").val("")
$("#content").val("")
$("#top").prop("checked", false);
},
rules: {
title: {
required: true,
minlength: 6,
maxlength: 12
},
content: {
required: true,
minlength: 10,
maxlength: 50
}
},
messages: {
title: {
required: "请输入标题",
minlength: "标题最少6个字符",
maxlength: "标题最多12个字符"
}
}
});
效果图
模态框 修改
//修改
$(".table").on("click", ".glyphicon-edit", function () {
//静态
// $(".modal-title").html("修改文章");
// 动态
var id = $(this).parent().attr("data-id");
// $("#_id").val(id);
$.ajax({
url: `http://localhost:5000/content/${id}`,
type: "GET",
success: function (res) {
if (res.status === 200) {
const data = res.data;
// 静态
$(".modal-title").html("修改文章");
$("#_id").val(id);
$("#title").val(data.title)
$("#content").val(data.content)
$("#top").prop("checked", data.top)
// 显示
$("#modal-id").modal("show")
}
}
})
})
清空缓存数据
$("#_id").val("")
$("#title").val("")
$("#content").val("")
$("#top").prop("checked", false);
