<link rel="stylesheet" href="/static/css/bootstrap.min.css">
我一引入，然后点击事件一按
$(function () {
$('#addModal').click(function () {
$('#shadow,#modal').removeClass('hide');
黑色的遮盖层能显示，模态对话框不显示
div标签的class确实也把hide给移除了
奇怪的是我另一个页面 也同样引入了boostrap，但是模态对话框能显示
这是class页面的代码
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<h1>Class list</h1>
<div>
<a href="/add_class">add</a>
<a id="addModal"">add(2)</a>
</div>
<table class="table table-striped table table-bordered table table-hover">
<thead>
<tr>
<th>ID</th>
<th>class_name</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
{% for row in class_list %}
<tr>
<td>{<!-- -->{ row.id }}</td>
<td>{<!-- -->{ row.title }}</td>
<td>
<a class="glyphicon glyphicon-pencil" href="/edit_class/?nid={<!-- -->{ row.id }}">edit</a>
|
<a href="/del_class/?nid={<!-- -->{ row.id }}">a</a>
|
<a class="editmodal">a</a>
</td>
{% endfor %}
</tr>
</tbody>
</table>
<style>
.hide{
display: none;
}
.shadow{
position:fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.modal{
position:fixed;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
background-color: white;
z-index: 1000;
margin-left: -200px;
margin-top: -200px;
}
</style>
<div id="shadow" class="shadow hide" ></div>
<div id="modal" class="modal hide" >
<p>
<input id="title" type="text" name ='title'>
</p>
<input type="submit" value="submit" id="addajax"><span id="errormsg"></span>
<input type="button" value="cancel" id="cancel">
</div>
<div id="Editmodal" class="modal hide" >
<h3>编辑框</h3>
<p>
<input id="edittitle" type="text" name ='edittitle'>
<input id="editid" type="text" name ='editid' style="display: none">
</p>
<input type="submit" value="submit" id="editajax""><span id="errormsg2"></span>
<input type="button" value="取消" id="cancel2">
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
$(function () {
$('#addModal').click(function () {
$('#shadow,#modal').removeClass('hide');
})
$('#addajax').click(function () {
$.ajax({
url:'/addmodalclass/',
type:'POST',
data:{'title':$('#title').val()},
dataType: 'JSON',
success:function(arg) {
if (arg.status){
window.location.reload();
}else{
$('#errormessage').text(arg.message);
}
}
})
})
$('#cancel').click(function () {
$('#shadow,#modal').addClass('hide')
})
$('.editmodal').click(function () {
$('#shadow,#Editmodal').removeClass('hide');
/*
填默认信息：
1、找当前标签：$(this)
2.$(this).parent().prevAll()当前标签之前的所有信息
3.从近到远012 .text取文本信息
*/
var tds=$(this).parent().prevAll();
var class_id=$(tds[1]).text();
var class_title=$(tds[0]).text();
$('#edittitle').val(class_title);
$('#editid').val(class_id);
console.log(class_title,class_id);
})
$('#cancel2').click(function () {
$('#shadow,#Editmodal').addClass('hide')
})
$('#editajax').click(function () {
$.ajax({
url:'/editmodalclass/',
type: 'POST',
data:{'title':$('#edittitle').val(),'id':$('#editid').val()},
dataType:'JSON',// 默认先把arg从字符串转化成对象，就不用在后面自己转化了。
success:function (arg) {
//JSON.parse(arg)//arg必须是json序列化的结果
if(arg){
window.location.reload();
}else{
$('#errormessage').text(arg.message);
}
}
})
})
})
</script>
</body>
</html>
这是students的代码
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<h1>STUDENTS list</h1>
<div>
<a class="btn btn-primary" href="/add_students/">add</a>
<a class="btn btn-primary" id="addmodalstudents">对话框添加学生</a>
</div>
<table class="table table-striped table table-bordered table table-hover">
<thead>
<tr>
<th>ID</th>
<th>student_name</th>
<th>classid</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
{% for row in students_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td class_id="{{ row.class_id }}">{{ row.title }}</td>
<td>
<a class="btn_edit glyphicon glyphicon-trash" href="delete_students/?nid={{ row.id }}">DEL</a>
|
<a class="glyphicon glyphicon-pencil" href="/edit_students/?nid={{ row.id }}">EDIT</a>
|
<a class="glyphicon glyphicon-pencil btn_edit" >EDIT2</a>
</td>
<tr/>
{% endfor %}
</tbody>
</table>
<style>
.hide{
display: none;
}
.shadow{
position:fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.addmodal{
position:fixed;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
background-color: white;
z-index: 1000;
margin-left: -200px;
margin-top: -200px;
}
</style>
<div id="shadow" class="shadow hide"></div>
<div id="addmodal" class="addmodal hide">
<p>
<input id="addname" type="text" name="name" placeholder="姓名">
</p>
<p>
班级：
<select id="addclassid" name="classID">
{% for row in class_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</p>
<input id="addajax" type="button" value="add">
<span id="errormessage" style="color: red"></span>
<input id="cancel" type="button" value="cancel">
</div>
<div id="editmodal" class="addmodal hide">
<h3>edit information</h3>
<p>
<input id="editname" type="text" name="name" placeholder="姓名">
<input id="editid" style="display: none">
</p>
<p>
班级：
<select id="editclassid" name="classID">
{% for row in class_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</p>
<input id="editajax" type="button" value="edit">
<span id="errormessage" style="color: red"></span>
<input id="cancel2" type="button" value="cancel">
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
$(function () {
$('#addmodalstudents').click(function () {
$('#shadow,#addmodal').removeClass('hide');
})
$('#addajax').click(function () {
$.ajax({
url:'/addmodalstudents/',
type:'POST',
data:{'name':$('#addname').val(),'class_id':$('#addclassid').val()},
success:function(arg) {
arg=JSON.parse(arg);
if (arg.status){
window.location.reload();
}else{
$('#errormessage').text(arg.message);
}
}
})
})
$('#cancel').click(function () {
$('#shadow,#addmodal').addClass('hide')
})
$('.btn_edit').click(function () {
$('#shadow,#editmodal').removeClass('hide');
/*
填默认信息：
1、找当前标签：$(this)
2.$(this).parent().prevAll()当前标签之前的所有信息
3.从近到远012 .text取文本信息
*/
var tds=$(this).parent().prevAll();
var studentsid=$(tds[2]).text();
var studentsname=$(tds[1]).text();
var classid=$(tds[0]).attr('class_id'); //把自定的class_id里面的row.id拿过来
$('#editname').val(studentsname);
$('#editid').val(studentsid);
$('#editclassid').val(classid);
console.log(studentsid,studentsname,classid);
})
$('#cancel2').click(function () {
$('#shadow,#editmodal').addClass('hide')
})
$('#editajax').click(function () {
$.ajax({
url:'/editmodalstudents/',
type: 'POST',
data:{'nid':$('#editid').val(),'class_id':$('#editclassid').val(),'name':$('#editname').val()},
dataType:'JSON',// 默认先把arg从字符串转化成对象，就不用在后面自己转化了。
success:function (arg) {
//JSON.parse(arg)//arg必须是json序列化的结果
if(arg){
window.location.reload();
}else{
$('#errormessage').text(arg.message);
}
}
})
})
})
</script>
</body>
</html>
